Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
bergold opened this issue Aug 12, 2022 · 4 comments · May be fixed by #2772
Open

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

bergold opened this issue Aug 12, 2022 · 4 comments · May be fixed by #2772
Labels
Package: react/avatar Type: Bug Confirmed bug

Comments

@bergold
Copy link

bergold commented Aug 12, 2022

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:

primitives/packages/react/avatar/src/Avatar.tsx

Lines 138 to 140 in 8f75e5b

image.onload = updateStatus('loaded');
image.onerror = updateStatus('error');
image.src = src;

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
Copy link
Contributor

jjenzz commented Aug 17, 2022 •
edited

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

@andy-hook andy-hook mentioned this issue Sep 20, 2022
Open
@DeveloperHarris
Copy link

Also experiencing this issue!

@stimw
Copy link

stimw commented Jun 26, 2023

any updates?

@semanser
Copy link

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>
  );
};

@g12i g12i linked a pull request Mar 11, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: react/avatar Type: Bug Confirmed bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Avatar] Support referrer policy in AvatarImage g12i/radix-ui
6 participants
@jjenzz @semanser @bergold @DeveloperHarris @andy-hook @stimw