feat: img src external query params (#128)

* feat: add `srcExternalQueryParams`

* feat: rename to `customizedSize`

* feat: update image docs

* fix: remove dependency

* feat: update variable name

apps/mibao-ui-docs/src/app/pages/image.stories.tsx

@@ -24,6 +24,10 @@ export default {
     crossOrigin: {
       options: ['', 'anonymous', 'use-credentials'],
       control: { type: 'select' }
+    },
+    customizedFixedSize: {
+      options: ['favicon', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'xxx-large'],
+      control: { type: 'select' }
     }
   },
   parameters: {
@@ -68,3 +72,30 @@ export const AsyncLoadingImage: Story = (args) => {
     </MibaoProvider>
   )
 }
+
+export const SrcExternalQueryParams: Story = (args) => {
+  return (
+    <MibaoProvider>
+      <MibaoImage
+        width="300px"
+        customizedSize={{
+          fixed: 'large'
+        }}
+        {...args}
+      />
+      <MibaoImage
+        width="300px"
+        customizedSize={{
+          lambda: '10x10'
+        }}
+        {...args}
+      />
+    </MibaoProvider>
+  )
+}
+
+SrcExternalQueryParams.args = {
+  src: 'https://oss.jinse.cc/production/e5a85cb5-bdd3-40c5-94de-c3335a704ab8.jpg',
+  customizedLambdaSize: '10x10',
+  customizedFixedSize: 'large'
+}

libs/mibao-ui/src/lib/image/image.tsx

@@ -11,13 +11,19 @@ import { useState, useMemo, useEffect, useCallback, ReactNode } from 'react'
 import FALLBACK_SRC from '../../../assets/images/fallback.svg'
 import { addParamsToUrl, disableImageContext, getImagePreviewUrl } from '../../utils'
 
+export type CustomizedImageSize = 'favicon' | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large'
+
 export interface ImageProps extends ChakraImageProps {
   loader?: ReactNode
   srcQueryParams?: Record<string, string | number>
   disableContextMenu?: boolean
-  resizeScale?: number // Specifies the shortest edge of the target zoom graph.
+  resizeScale?: number // OSS: Specifies the shortest edge of the target zoom graph.
   webp?: boolean
   containerProps?: BoxProps
+  customizedSize?: {
+    fixed?: CustomizedImageSize
+    lambda?: string
+  }
 }
 
 export const Image: React.FC<ImageProps> = ({
@@ -27,6 +33,7 @@ export const Image: React.FC<ImageProps> = ({
   loader,
   webp,
   src,
+  customizedSize,
   ...props
 }) => {
   const { fallbackSrc = FALLBACK_SRC } = props
@@ -40,15 +47,19 @@ export const Image: React.FC<ImageProps> = ({
 
   const imageSrc = useMemo(() => {
     if (!src) return src
-    const url = addParamsToUrl(src, srcQueryParams ?? {})
+    const url = addParamsToUrl(src, {
+      ...srcQueryParams,
+      ...customizedSize?.fixed ? { size: customizedSize.fixed } : {},
+      ...customizedSize?.lambda ? { size: customizedSize.lambda } : {}
+    })
     if (resizeScale) {
       return getImagePreviewUrl(url, {
         size: resizeScale,
         webp
       })
     }
     return url
-  }, [resizeScale, src, webp, srcQueryParams])
+  }, [src, srcQueryParams, customizedSize, resizeScale, webp])
 
   useEffect(() => {
     if (src) {