diff --git a/src/image/image.en-US.md b/src/image/image.en-US.md index 76a325017..f92617e3b 100644 --- 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 index 7f31ffb8d..3545dc77c 100644 --- 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 index 1cf85eed6..a7d40680b 100644 --- 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 index 863b1e65f..32b305ed1 100644 --- a/src/image/props.ts +++ b/src/image/props.ts @@ -17,6 +17,11 @@ export default { error: { type: [String, Function] as PropType, }, + /** 图片加载失败时,显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容,请更为使用 `error` */ + fallback: { + type: String, + default: '', + }, /** 图片填充模式 */ fit: { type: String as PropType, diff --git a/src/image/type.ts b/src/image/type.ts index b5929dea6..dab08bf58 100644 --- 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