feat(image): support fallback

Tencent · Nov 19, 2024 · b0b8e3e · b0b8e3e
1 parent 7d3a73a
commit b0b8e3e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 0 deletions.
diff --git a/src/image/image.en-US.md b/src/image/image.en-US.md
@@ -8,6 +8,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 alt | String | - | \- | N
 error | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | 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
 lazy | Boolean | false | \- | N
 loading | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/src/image/image.md b/src/image/image.md
@@ -8,6 +8,7 @@
 -- | -- | -- | -- | --
 alt | String | - | 图片描述 | N
 error | String / Slot / Function | - | 自定义图片加载失败状态下的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+fallback | String | - | 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` | N
 fit | String | fill | 图片填充模式。可选项：contain/cover/fill/none/scale-down | N
 lazy | Boolean | false | 是否开启图片懒加载 | N
 loading | String / Slot / Function | - | 自定义加载中状态的图片内容，如：“加载中”。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/src/image/image.tsx b/src/image/image.tsx
@@ -66,6 +66,10 @@ export default defineComponent({
       props.onError?.({ e });
       isLoading.value = false;
       isError.value = true;
+      if (props.fallback) {
+        realSrc.value = props.fallback;
+        isError.value = false;
+      }
     };
 
     const maskContent = computed(() => {

diff --git a/src/image/props.ts b/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']>,

diff --git a/src/image/type.ts b/src/image/type.ts
@@ -16,6 +16,11 @@ export interface TdImageProps {
    * 自定义图片加载失败状态下的显示内容
    */
   error?: string | TNode;
+  /**
+   * 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error`
+   * @default ''
+   */
+  fallback?: string;
   /**
    * 图片填充模式
    * @default fill