feat(Image): add crossorigin & referrerpolicy props (youzan#12641)

CatsAndMice · Apr 8, 2024 · ec01eaf · ec01eaf
1 parent 16b389b
commit ec01eaf
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 0 deletions.
diff --git a/packages/vant/src/image/Image.tsx b/packages/vant/src/image/Image.tsx
@@ -11,6 +11,7 @@ import {
   type PropType,
   type CSSProperties,
   type ExtractPropTypes,
+  type ImgHTMLAttributes,
 } from 'vue';
 
 // Utils
@@ -49,6 +50,8 @@ export const imageProps = {
   iconPrefix: String,
   showLoading: truthProp,
   loadingIcon: makeStringProp('photo'),
+  crossorigin: String as PropType<ImgHTMLAttributes['crossorigin']>,
+  referrerpolicy: String as PropType<ImgHTMLAttributes['referrerpolicy']>,
 };
 
 export type ImageProps = ExtractPropTypes<typeof imageProps>;
@@ -154,6 +157,8 @@ export default defineComponent({
           objectFit: props.fit,
           objectPosition: props.position,
         },
+        crossorigin: props.crossorigin,
+        referrerpolicy: props.referrerpolicy,
       };
 
       if (props.lazyLoad) {

diff --git a/packages/vant/src/image/README.md b/packages/vant/src/image/README.md
@@ -109,6 +109,8 @@ app.use(Lazyload);
 | loading-icon | Loading icon | _string_ | `photo` |
 | icon-size | Icon size | _number \| string_ | `32px` |
 | icon-prefix | Icon className prefix | _string_ | `van-icon` |
+| crossorigin | same as [crossorigin](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin) | _string_ | - |
+| referrerpolicy | same as [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/referrerPolicy) | _string_ | - |
 
 ### fit optional value
 

diff --git a/packages/vant/src/image/README.zh-CN.md b/packages/vant/src/image/README.zh-CN.md
@@ -135,6 +135,8 @@ app.use(Lazyload);
 | loading-icon | 加载时提示的图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `photo` |
 | icon-size | 加载图标和失败图标的大小 | _number \| string_ | `32px` |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
+| crossorigin | 等同于原生的 [crossorigin](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/crossOrigin) 属性 | _string_ | - |
+| referrerpolicy | 等同于原生的 [referrerpolicy](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/referrerPolicy) 属性 | _string_ | - |
 
 ### 图片填充模式
 

diff --git a/packages/vant/src/image/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/image/test/__snapshots__/index.spec.ts.snap
@@ -25,6 +25,17 @@ exports[`should emit load event after image loaded 1`] = `
 </div>
 `;
 
+exports[`should pass props to img 1`] = `
+<div class="van-image">
+  <img
+    src="https://img.com"
+    class="van-image__img"
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  >
+</div>
+`;
+
 exports[`should render default slot correctly 1`] = `
 <div class="van-image">
   <img

diff --git a/packages/vant/src/image/test/index.spec.ts b/packages/vant/src/image/test/index.spec.ts
@@ -18,6 +18,19 @@ test('should emit load event after image loaded', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
+test('should pass props to img', async () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      src: IMAGE_URL,
+      referrerpolicy: 'no-referrer',
+      crossorigin: 'anonymous',
+    },
+  });
+
+  await wrapper.find('img').trigger('load');
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
 test('should watch src and reset', async () => {
   const wrapper = mount(VanImage, {
     props: {