[Avatar] Referrer Policy is not respected when loading the image

[bergold]

trafficstars

Bug report

Current Behavior

If I add the referrerPolicy prop to the <Avatar.Image> component like in the following snippet, nonetheless, the image gets loaded with the default referrer policy of the document.

<Avatar.Image src={src} referrerPolicy="no-referrer" />

Checking the devtool's network tab, I can see the request for the image and the effective referrer policy "strict-origin-when-cross-origin" which is the default in Chrome.

Expected behavior

The referrer policy should be respected.

Reproducible example

CodeSandbox

Suggested solution

When preloading the image the referrerPolicy property should be respected as well and added to the window.Image instance. (Maybe there are more properties except for src to be also included in the preloading)

This is the place, where the referrerPolicy should be added: https://github.com/radix-ui/primitives/blob/8f75e5be679b9c269638bddf532a166d80edecb4/packages/react/avatar/src/Avatar.tsx#L138-L140

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-avatar	1.0.0
React	n/a	18.2.0
Browser	Chrome	104
Assistive tech
Node	n/a	v16.15.1
npm/yarn	npm	8.11.0
Operating System	macOS	12.5

[jjenzz]

this might be a good opportunity to remove the useImageLoadingStatus logic and instead pass all the props directly to the img (including src which would improve ssr): https://codesandbox.io/s/cocky-dew-y97cog?file=/src/App.js

[DeveloperHarris]

Also experiencing this issue!

[stimw]

any updates?

[semanser]

Unfortunately, this is still an issue. I was able to solve it with direct access (using useRef) workaround:

import * as AvatarRadix from "@radix-ui/react-avatar";

import { fallbackStyles, imageStyles, rootStyles } from "./Avatar.css";
import { useEffect, useRef } from "react";

type AvatarProps = {
  src: string;
  fallback: string;
};

export const Avatar = ({ src, fallback }: AvatarProps) => {
  const imgRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    if (imgRef.current) {
      imgRef.current.setAttribute("referrerpolicy", "no-referrer");
    }
  }, [imgRef]);

  return (
    <AvatarRadix.Root className={rootStyles}>
      <AvatarRadix.Image className={imageStyles} src={src} alt="user avatar" referrerPolicy="no-referrer" ref={imgRef}/>
      <AvatarRadix.Fallback className={fallbackStyles} delayMs={600}>
        {fallback}
      </AvatarRadix.Fallback>
    </AvatarRadix.Root>
  );
};