referrerPolicy not work in NextJS (<Avatar/>)

[nasatome]

Description

When I want to use the referer policy in NextJS, it is implemented inside a <span> tag (In the Avatar component)

Link to Reproduction

https://codesandbox.io/s/dazzling-thunder-v5ucno

Steps to reproduce

1.- Inspect the Avatar generated html expected result:

Obtained:

Chakra UI Version

2.2.4

Browser

Chromium v101

Operating System

• [ ] macOS
• [ ] Windows
• [X] Linux

Additional Information

Related: https://github.com/chakra-ui/chakra-ui/issues/5909

[wub]

I've been struggling with this too. It looks like the referrer-policy doesn't actually get passed through to useImage (see here), which loads the image in the background and then swaps the element over. The initial load fails because it's missing the param.

I assume your expected result is referrerPolicy="no-referrer", not no-referrer="no-referrer".

(Pinging @jaqas because he took care of #6057 😄)

[nasatome]

I assume your expected result is referrerPolicy="no-referrer", not no-referrer="no-referrer".

That's right, I had a problem copying and pasting, sorry.

[nogenem]

Having the same problem ;/

[ItamarShDev]

you can use https://nextjs.org/docs/advanced-features/security-headers

[segunadebayo]

This has already been fixed in one of the recent PRs. We'll release an update shortly.

If the issue persists after the release, I'll re-open this issue.