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.

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

feat(Avatar): add referrerpolicy prop to img tag #392

Closed
wants to merge 2 commits into from

Conversation

sduduzog
Copy link
Contributor

@sduduzog sduduzog commented Jul 6, 2023

Closes #351

I'm not sure about my choice with the inline PropType, seeing its width, keen on styling commentry fitting to the project.

@vercel
Copy link

vercel bot commented Jul 6, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
ui ❌ Failed (Inspect) Jul 16, 2023 8:28pm

@benjamincanac benjamincanac changed the title feat: (Avatar): add referrerpolicy prop to img tag feat(Avatar): add referrerpolicy prop to img tag Jul 12, 2023
@@ -32,6 +39,10 @@ export default defineComponent({
type: String,
default: null
},
referrerpolicy: {
type: String as PropType<'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'>,
default: () => 'strict-origin-when-cross-origin'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why set a default here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Going off of the mdn docs. I just checked this out and looks like even when the props is null or undefined, the default is still part of the headers request.

@benjamincanac
Copy link
Member

Just thought about this and there are lots of other properties that we can pass to an img. So, I think the best way to achieve this would be to use inheritAttrs: false on the component and v-bind="$attrs" on the img tag.

@sduduzog
Copy link
Contributor Author

Will setup a clean pr for it, then close this one after

@03balogun
Copy link

Hi @sduduzog and @benjamincanac, thanks for the great work.

Another case where we might need to add an attribute to the image tag is when there's a need to set a value for the crossorigin attribute.

A recommended fix when using the security module and fetching images from external links. More here Baroshem/nuxt-security#138 (comment)

@sduduzog
Copy link
Contributor Author

sduduzog commented Jul 16, 2023

Closing in favour of #421

@03balogun with the new PR, both our issues will be resolved

@sduduzog sduduzog closed this Jul 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Missing referrer policy prop for avatar component
3 participants