fix(Avatar): support referrer policy in AvatarImage.vue (#1477)

(from radix-ui)

packages/radix-vue/src/Avatar/AvatarImage.vue

@@ -12,23 +12,24 @@ export type AvatarImageEmits = {
 }
 export interface AvatarImageProps extends PrimitiveProps {
   src: string
+  referrerPolicy?: ImgHTMLAttributes['referrerpolicy']
 }
 </script>
 
 <script setup lang="ts">
-import { toRefs, watch } from 'vue'
+import { type ImgHTMLAttributes, toRefs, watch } from 'vue'
 import { Primitive } from '../Primitive'
 import { injectAvatarRootContext } from './AvatarRoot.vue'
 import { useImageLoadingStatus } from './utils'
 
 const props = withDefaults(defineProps<AvatarImageProps>(), { as: 'img' })
 const emits = defineEmits<AvatarImageEmits>()
 
-const { src } = toRefs(props)
+const { src, referrerPolicy } = toRefs(props)
 useForwardExpose()
 const rootContext = injectAvatarRootContext()
 
-const imageLoadingStatus = useImageLoadingStatus(src)
+const imageLoadingStatus = useImageLoadingStatus(src, referrerPolicy)
 
 watch(
   imageLoadingStatus,
@@ -48,6 +49,7 @@ watch(
     :as-child="asChild"
     :as="as"
     :src="src"
+    :referrer-policy="referrerPolicy"
   >
     <slot />
   </Primitive>

packages/radix-vue/src/Avatar/utils.ts

@@ -1,8 +1,8 @@
-import { type Ref, onMounted, onUnmounted, ref, watch } from 'vue'
+import { type ImgHTMLAttributes, type Ref, onMounted, onUnmounted, ref, watch } from 'vue'
 
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
 
-export function useImageLoadingStatus(src: Ref<string>) {
+export function useImageLoadingStatus(src: Ref<string>, referrerPolicy?: Ref<ImgHTMLAttributes['referrerpolicy']>) {
   const loadingStatus = ref<ImageLoadingStatus>('idle')
   const isMounted = ref(false)
 
@@ -14,16 +14,19 @@ export function useImageLoadingStatus(src: Ref<string>) {
   onMounted(() => {
     isMounted.value = true
 
-    watch(src, (value) => {
-      if (!value) {
+    watch([() => src.value, () => referrerPolicy?.value], ([src, referrer]) => {
+      if (!src) {
         loadingStatus.value = 'error'
       }
       else {
         const image = new window.Image()
         loadingStatus.value = 'loading'
         image.onload = updateStatus('loaded')
         image.onerror = updateStatus('error')
-        image.src = value
+        image.src = src
+        if (referrer) {
+          image.referrerPolicy = referrer
+        }
       }
     }, { immediate: true })
   })