feat(image): merge props.src api

packages/products/tdesign-miniprogram/src/image/README.en-US.md

@@ -15,7 +15,7 @@ loading | String / Slot | 'default' | [see more ts definition](https://github.co
 mode | String | scaleToFill | options: scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N
 shape | String | square | options: circle/round/square | N
 show-menu-by-longpress | Boolean | false | \- | N
-src | String | - | src attribute of `<img>`. image File can also be loaded | N
+src | String | - | \- | N
 t-id | String | - | `1.2.10`。image tag id | N
 webp | Boolean | false | \- | N
 width | String / Number | - | \- | N

packages/products/tdesign-react/src/image/image.en-US.md

@@ -1,23 +1,27 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Image Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 alt | String | - | \- | N
 error | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-fit | String | fill | options：contain/cover/fill/none/scale-down | N
+fallback | String | - | display `fallback` image on `src` loading failed. you can also use `error` to define more complex error content | N
+fit | String | fill | options: contain/cover/fill/none/scale-down | N
 gallery | Boolean | false | \- | N
 lazy | Boolean | false | \- | N
 loading | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 overlayContent | TNode | - | overlay on the top of image。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-overlayTrigger | String | always | options：always/hover | N
+overlayTrigger | String | always | options: always/hover | N
 placeholder | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 position | String | center | \- | N
-shape | String | square | options：circle/round/square | N
-src | String | - | \- | N
+referrerpolicy | String | - | attribute of `<img>`, [MDN Definition](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。options: no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N
+shape | String | square | options: circle/round/square | N
+src | String / File | - | src attribute of `<img>`. image File can also be loaded。Typescript：`string \| File` | N
+srcset | Object | - | for `.avif` and `.webp` image url, load `srcset` before `src`。Typescript：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/image/type.ts) | N
 onError | Function |  | Typescript：`(context: { e: ImageEvent }) => void`<br/>trigger on image load failed | N
 onLoad | Function |  | Typescript：`(context: { e: ImageEvent }) => void`<br/>trigger on image loaded | N

packages/products/tdesign-react/src/image/image.md

@@ -1,14 +1,16 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Image Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 alt | String | - | 图片描述 | N
 error | TNode | - | 自定义图片加载失败状态下的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+fallback | String | - | 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` | N
 fit | String | fill | 图片填充模式。可选项：contain/cover/fill/none/scale-down | N
 gallery | Boolean | false | 是否展示为图集样式 | N
 lazy | Boolean | false | 是否开启图片懒加载 | N
@@ -17,7 +19,9 @@ overlayContent | TNode | - | 图片上方的浮层内容。TS 类型：`string \
 overlayTrigger | String | always | 浮层 `overlayContent` 出现的时机。可选项：always/hover | N
 placeholder | TNode | - | 占位元素，展示层级低于 `loading` `error` 和图片本身，值类型为字符串时表示占位图片地址。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 position | String | center | 等同于原生的 object-position 属性，可选值为 top right bottom left 或 string，可以自定义任何单位，px 或者 百分比 | N
+referrerpolicy | String | - | `<img>` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。可选项：no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N
 shape | String | square | 图片圆角类型。可选项：circle/round/square | N
-src | String | - | 图片链接 | N
+src | String / File | - | 用于显示图片的链接或原始图片文件对象。TS 类型：`string \| File` | N
+srcset | Object | - | 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址。TS 类型：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/image/type.ts) | N
 onError | Function |  | TS 类型：`(context: { e: ImageEvent }) => void`<br/>图片加载失败时触发 | N
 onLoad | Function |  | TS 类型：`(context: { e: ImageEvent }) => void`<br/>图片加载完成时触发 | N

packages/products/tdesign-react/src/image/type.ts

@@ -16,6 +16,11 @@ export interface TdImageProps {
    * 自定义图片加载失败状态下的显示内容
    */
   error?: TNode;
+  /**
+   * 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error`
+   * @default ''
+   */
+  fallback?: string;
   /**
    * 图片填充模式
    * @default fill
@@ -53,16 +58,31 @@ export interface TdImageProps {
    * @default center
    */
   position?: string;
+  /**
+   * `<img>` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
+   */
+  referrerpolicy?:
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url';
   /**
    * 图片圆角类型
    * @default square
    */
   shape?: 'circle' | 'round' | 'square';
   /**
-   * 图片链接
-   * @default ''
+   * 用于显示图片的链接或原始图片文件对象
+   */
+  src?: string | File;
+  /**
+   * 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址
    */
-  src?: string;
+  srcset?: ImageSrcset;
   /**
    * 图片加载失败时触发
    */
@@ -72,3 +92,8 @@ export interface TdImageProps {
    */
   onLoad?: (context: { e: ImageEvent<HTMLImageElement> }) => void;
 }
+
+export interface ImageSrcset {
+  'image/avif': string;
+  'image/webp': string;
+}

packages/products/tdesign-vue-next/src/image/image.en-US.md

@@ -1,22 +1,26 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Image Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 alt | String | - | \- | N
 error | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-fit | String | fill | options：contain/cover/fill/none/scale-down | N
+fallback | String | - | display `fallback` image on `src` loading failed. you can also use `error` to define more complex error content | N
+fit | String | fill | options: contain/cover/fill/none/scale-down | N
 gallery | Boolean | false | \- | N
 lazy | Boolean | false | \- | N
 loading | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 overlayContent | String / Slot / Function | - | overlay on the top of image。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-overlayTrigger | String | always | options：always/hover | N
+overlayTrigger | String | always | options: always/hover | N
 placeholder | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 position | String | center | \- | N
-shape | String | square | options：circle/round/square | N
-src | String | - | \- | N
+referrerpolicy | String | - | attribute of `<img>`, [MDN Definition](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。options: no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N
+shape | String | square | options: circle/round/square | N
+src | String / File | - | src attribute of `<img>`. image File can also be loaded。Typescript：`string \| File` | N
+srcset | Object | - | for `.avif` and `.webp` image url, load `srcset` before `src`。Typescript：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image/type.ts) | N
 onError | Function |  | Typescript：`(context: { e: ImageEvent }) => void`<br/>trigger on image load failed | N
 onLoad | Function |  | Typescript：`(context: { e: ImageEvent }) => void`<br/>trigger on image loaded | N
 

packages/products/tdesign-vue-next/src/image/image.md

@@ -1,12 +1,14 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Image Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 alt | String | - | 图片描述 | N
 error | String / Slot / Function | - | 自定义图片加载失败状态下的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+fallback | String | - | 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` | N
 fit | String | fill | 图片填充模式。可选项：contain/cover/fill/none/scale-down | N
 gallery | Boolean | false | 是否展示为图集样式 | N
 lazy | Boolean | false | 是否开启图片懒加载 | N
@@ -15,8 +17,10 @@ overlayContent | String / Slot / Function | - | 图片上方的浮层内容。TS
 overlayTrigger | String | always | 浮层 `overlayContent` 出现的时机。可选项：always/hover | N
 placeholder | String / Slot / Function | - | 占位元素，展示层级低于 `loading` `error` 和图片本身，值类型为字符串时表示占位图片地址。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 position | String | center | 等同于原生的 object-position 属性，可选值为 top right bottom left 或 string，可以自定义任何单位，px 或者 百分比 | N
+referrerpolicy | String | - | `<img>` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。可选项：no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N
 shape | String | square | 图片圆角类型。可选项：circle/round/square | N
-src | String | - | 图片链接 | N
+src | String / File | - | 用于显示图片的链接或原始图片文件对象。TS 类型：`string \| File` | N
+srcset | Object | - | 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址。TS 类型：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image/type.ts) | N
 onError | Function |  | TS 类型：`(context: { e: ImageEvent }) => void`<br/>图片加载失败时触发 | N
 onLoad | Function |  | TS 类型：`(context: { e: ImageEvent }) => void`<br/>图片加载完成时触发 | N
 

packages/products/tdesign-vue-next/src/image/props.ts

@@ -17,6 +17,11 @@ export default {
   error: {
     type: [String, Function] as PropType<TdImageProps['error']>,
   },
+  /** 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` */
+  fallback: {
+    type: String,
+    default: '',
+  },
   /** 图片填充模式 */
   fit: {
     type: String as PropType<TdImageProps['fit']>,
@@ -56,6 +61,14 @@ export default {
     type: String,
     default: 'center',
   },
+  /** `<img>` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) */
+  referrerpolicy: {
+    type: String as PropType<TdImageProps['referrerpolicy']>,
+    validator(val: TdImageProps['referrerpolicy']): boolean {
+      if (!val) return true;
+      return ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'].includes(val);
+    },
+  },
   /** 图片圆角类型 */
   shape: {
     type: String as PropType<TdImageProps['shape']>,
@@ -65,10 +78,13 @@ export default {
       return ['circle', 'round', 'square'].includes(val);
     },
   },
-  /** 图片链接 */
+  /** 用于显示图片的链接或原始图片文件对象 */
   src: {
-    type: String,
-    default: '',
+    type: [String, File] as PropType<TdImageProps['src']>,
+  },
+  /** 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址 */
+  srcset: {
+    type: Object as PropType<TdImageProps['srcset']>,
   },
   /** 图片加载失败时触发 */
   onError: Function as PropType<TdImageProps['onError']>,

packages/products/tdesign-vue-next/src/image/type.ts

@@ -16,6 +16,11 @@ export interface TdImageProps {
    * 自定义图片加载失败状态下的显示内容
    */
   error?: string | TNode;
+  /**
+   * 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error`
+   * @default ''
+   */
+  fallback?: string;
   /**
    * 图片填充模式
    * @default fill
@@ -53,16 +58,31 @@ export interface TdImageProps {
    * @default center
    */
   position?: string;
+  /**
+   * `<img>` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
+   */
+  referrerpolicy?:
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url';
   /**
    * 图片圆角类型
    * @default square
    */
   shape?: 'circle' | 'round' | 'square';
   /**
-   * 图片链接
-   * @default ''
+   * 用于显示图片的链接或原始图片文件对象
+   */
+  src?: string | File;
+  /**
+   * 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址
    */
-  src?: string;
+  srcset?: ImageSrcset;
   /**
    * 图片加载失败时触发
    */
@@ -72,3 +92,8 @@ export interface TdImageProps {
    */
   onLoad?: (context: { e: ImageEvent }) => void;
 }
+
+export interface ImageSrcset {
+  'image/avif': string;
+  'image/webp': string;
+}

packages/products/tdesign-vue/src/image/props.ts

@@ -17,6 +17,11 @@ export default {
   error: {
     type: [String, Function] as PropType<TdImageProps['error']>,
   },
+  /** 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` */
+  fallback: {
+    type: String,
+    default: '',
+  },
   /** 图片填充模式 */
   fit: {
     type: String as PropType<TdImageProps['fit']>,
@@ -56,6 +61,14 @@ export default {
     type: String,
     default: 'center',
   },
+  /** `<img>` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) */
+  referrerpolicy: {
+    type: String as PropType<TdImageProps['referrerpolicy']>,
+    validator(val: TdImageProps['referrerpolicy']): boolean {
+      if (!val) return true;
+      return ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'].includes(val);
+    },
+  },
   /** 图片圆角类型 */
   shape: {
     type: String as PropType<TdImageProps['shape']>,
@@ -65,10 +78,13 @@ export default {
       return ['circle', 'round', 'square'].includes(val);
     },
   },
-  /** 图片链接 */
+  /** 用于显示图片的链接或原始图片文件对象 */
   src: {
-    type: String,
-    default: '',
+    type: [String, File] as PropType<TdImageProps['src']>,
+  },
+  /** 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址 */
+  srcset: {
+    type: Object as PropType<TdImageProps['srcset']>,
   },
   /** 图片加载失败时触发 */
   onError: Function as PropType<TdImageProps['onError']>,

packages/products/tdesign-vue/src/image/type.ts

@@ -16,6 +16,11 @@ export interface TdImageProps {
    * 自定义图片加载失败状态下的显示内容
    */
   error?: string | TNode;
+  /**
+   * 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error`
+   * @default ''
+   */
+  fallback?: string;
   /**
    * 图片填充模式
    * @default fill
@@ -53,16 +58,31 @@ export interface TdImageProps {
    * @default center
    */
   position?: string;
+  /**
+   * `<img>` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
+   */
+  referrerpolicy?:
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url';
   /**
    * 图片圆角类型
    * @default square
    */
   shape?: 'circle' | 'round' | 'square';
   /**
-   * 图片链接
-   * @default ''
+   * 用于显示图片的链接或原始图片文件对象
+   */
+  src?: string | File;
+  /**
+   * 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址
    */
-  src?: string;
+  srcset?: ImageSrcset;
   /**
    * 图片加载失败时触发
    */
@@ -72,3 +92,8 @@ export interface TdImageProps {
    */
   onLoad?: (context: { e: ImageEvent }) => void;
 }
+
+export interface ImageSrcset {
+  'image/avif': string;
+  'image/webp': string;
+}