feat(useImage): support referrerPolicy option (#3132)

vueuse · Jun 6, 2023 · 04d32d8 · 04d32d8
1 parent 78a3a62
commit 04d32d8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/core/useImage/component.ts b/packages/core/useImage/component.ts
@@ -15,6 +15,7 @@ export const UseImage = /*#__PURE__*/ defineComponent<UseImageOptions & Renderab
     'class',
     'loading',
     'crossorigin',
+    'referrerPolicy',
   ] as unknown as undefined,
   setup(props, { slots }) {
     const data = reactive(useImage(props))

diff --git a/packages/core/useImage/index.ts b/packages/core/useImage/index.ts
@@ -19,12 +19,14 @@ export interface UseImageOptions {
   loading?: HTMLImageElement['loading']
   /** Image CORS settings */
   crossorigin?: string
+  /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
+  referrerPolicy?: HTMLImageElement['referrerPolicy']
 }
 
 async function loadImage(options: UseImageOptions): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
     const img = new Image()
-    const { src, srcset, sizes, class: clazz, loading, crossorigin } = options
+    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy } = options
 
     img.src = src
 
@@ -43,6 +45,9 @@ async function loadImage(options: UseImageOptions): Promise<HTMLImageElement> {
     if (crossorigin)
       img.crossOrigin = crossorigin
 
+    if (referrerPolicy)
+      img.referrerPolicy = referrerPolicy
+
     img.onload = () => resolve(img)
     img.onerror = reject
   })