diff --git a/src/image/__test__/index.test.jsx b/src/image/__test__/index.test.jsx index 9e60b70e4..41b4a62ea 100644 --- a/src/image/__test__/index.test.jsx +++ b/src/image/__test__/index.test.jsx @@ -114,6 +114,16 @@ describe('Image', () => { expect(onError).toBeCalledTimes(0); }); + it(': fallback', async () => { + const onError = vi.fn(); + const wrapper = mount(() => ); + await nextTick(); + const $image = wrapper.find(`.${name}__img`); + // 手动触发 图片加载失败的回调函数 + await $image.trigger('error'); + expect($image.attributes('src')).toBe(IMAGE); + }); + it(': onError', async () => { const onError = vi.fn(); const slots = { diff --git a/src/image/image.en-US.md b/src/image/image.en-US.md index ed116611f..f92617e3b 100644 --- a/src/image/image.en-US.md +++ b/src/image/image.en-US.md @@ -8,13 +8,15 @@ 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 -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 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 position | String | center | \- | N -shape | String | square | options:circle/round/square | N +referrerpolicy | String | - | attribute of ``, [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 | - | \- | N -srcset | Object | - | for `.avif` and `.webp` image url。Typescript:`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image/type.ts) | 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-mobile-vue/tree/develop/src/image/type.ts) | N onError | Function | | Typescript:`(context: { e: ImageEvent }) => void`
trigger on image load failed | N onLoad | Function | | Typescript:`(context: { e: ImageEvent }) => void`
trigger on image loaded | N @@ -25,12 +27,12 @@ name | params | description error | `(context: { e: ImageEvent })` | trigger on image load failed load | `(context: { e: ImageEvent })` | trigger on image loaded - ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- --td-image-color | @font-gray-3 | - --td-image-loading-bg-color | @bg-color-secondarycontainer | - --td-image-loading-color | @font-gray-3 | - ---td-image-round-radius | @radius-default | - +--td-image-round-radius | @radius-default | - \ No newline at end of file diff --git a/src/image/image.md b/src/image/image.md index 4fedd6865..3545dc77c 100644 --- a/src/image/image.md +++ b/src/image/image.md @@ -1,19 +1,22 @@ :: BASE_DOC :: ## API + ### Image Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- 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 position | String | center | 等同于原生的 object-position 属性,可选值为 top right bottom left 或 string,可以自定义任何单位,px 或者 百分比 | N +referrerpolicy | String | - | `` 标签的原生属性,[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 -srcset | Object | - | 图片地址,支持特殊格式的图片,如 `.avif` 和 `.webp`。TS 类型:`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image/type.ts) | N +srcset | Object | - | 图片链接集合,用于支持特殊格式的图片,如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式,浏览器不支持的情况下,加载 `src` 设置的图片地址。TS 类型:`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image/type.ts) | N onError | Function | | TS 类型:`(context: { e: ImageEvent }) => void`
图片加载失败时触发 | N onLoad | Function | | TS 类型:`(context: { e: ImageEvent }) => void`
图片加载完成时触发 | N @@ -24,12 +27,12 @@ onLoad | Function | | TS 类型:`(context: { e: ImageEvent }) => void`
error | `(context: { e: ImageEvent })` | 图片加载失败时触发 load | `(context: { e: ImageEvent })` | 图片加载完成时触发 - ### CSS Variables + 组件提供了下列 CSS 变量,可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- --td-image-color | @font-gray-3 | - --td-image-loading-bg-color | @bg-color-secondarycontainer | - --td-image-loading-color | @font-gray-3 | - ---td-image-round-radius | @radius-default | - +--td-image-round-radius | @radius-default | - \ No newline at end of file diff --git a/src/image/image.tsx b/src/image/image.tsx index c1b76022c..a7d40680b 100644 --- a/src/image/image.tsx +++ b/src/image/image.tsx @@ -2,7 +2,7 @@ import { ref, computed, defineComponent, watchEffect } from 'vue'; import { useIntersectionObserver } from '@vueuse/core'; import { CloseIcon } from 'tdesign-icons-vue-next'; -import Loading from '../loading'; +import TLoading from '../loading'; import config from '../config'; import { useTNodeJSX } from '../hooks/tnode'; import { usePrefixClass } from '../hooks/useClass'; @@ -13,7 +13,6 @@ const { prefix } = config; export default defineComponent({ name: `${prefix}-image`, - components: { CloseIcon, Loading }, props, setup(props, context) { const imageClass = usePrefixClass('image'); @@ -21,7 +20,7 @@ export default defineComponent({ // 默认loading和error状态展示,slot支持Node和Function const closeIcon = ; - const LoadingIcon = ; + const LoadingIcon = ; // 记录图片的loading、error状态 const isLoading = ref(true); @@ -67,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(() => { @@ -109,6 +112,7 @@ export default defineComponent({ style={imageStyles.value} src={realSrc.value} alt={props.alt} + referrerpolicy={props.referrerpolicy} onLoad={handleImgLoadCompleted} onError={handleImgLoadError} /> diff --git a/src/image/props.ts b/src/image/props.ts index 19190ce0e..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, @@ -37,6 +42,23 @@ export default { type: String, default: 'center', }, + /** `` 标签的原生属性,[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) */ + referrerpolicy: { + type: String as PropType, + 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, @@ -51,7 +73,7 @@ export default { type: String, default: '', }, - /** 图片地址,支持特殊格式的图片,如 `.avif` 和 `.webp` */ + /** 图片链接集合,用于支持特殊格式的图片,如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式,浏览器不支持的情况下,加载 `src` 设置的图片地址 */ srcset: { type: Object as PropType, }, diff --git a/src/image/type.ts b/src/image/type.ts index e473443f5..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 @@ -35,6 +40,18 @@ export interface TdImageProps { * @default center */ position?: string; + /** + * `` 标签的原生属性,[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 @@ -46,7 +63,7 @@ export interface TdImageProps { */ src?: string; /** - * 图片地址,支持特殊格式的图片,如 `.avif` 和 `.webp` + * 图片链接集合,用于支持特殊格式的图片,如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式,浏览器不支持的情况下,加载 `src` 设置的图片地址 */ srcset?: ImageSrcset; /**