From ec01eaf9301d6bcf8420f62389bf28144b1757d7 Mon Sep 17 00:00:00 2001
From: Jungzl <13jungzl@gmail.com>
Date: Wed, 21 Feb 2024 21:27:25 +0800
Subject: [PATCH] feat(Image): add `crossorigin` & `referrerpolicy` props
 (#12641)

---
 packages/vant/src/image/Image.tsx                   |  5 +++++
 packages/vant/src/image/README.md                   |  2 ++
 packages/vant/src/image/README.zh-CN.md             |  2 ++
 .../src/image/test/__snapshots__/index.spec.ts.snap | 11 +++++++++++
 packages/vant/src/image/test/index.spec.ts          | 13 +++++++++++++
 5 files changed, 33 insertions(+)

diff --git a/packages/vant/src/image/Image.tsx b/packages/vant/src/image/Image.tsx
index 513167a20b1..e4d412e0fd9 100644
--- 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
index ca7e0ff8eea..08a096766b2 100644
--- 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
index 7e2ec79e2af..b5e28f65164 100644
--- 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
index 29bc22bda1b..e081ac12972 100644
--- 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
index 2945be63cb0..d472cb9c79f 100644
--- 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: {