Next.js Discord

Discord Forum

next/images CSP error

Answered
Air Penguin posted this in #help-forum
Open in Discord
Air PenguinOP
When using next/image it always adds inline styles on the image. It adds: style="color:transparent".
I tried setting style={{ color: undefined }}, but it doesn't seem to work.
Therefore, I'm getting a CSP error. I don't want to add style-src 'unsafe-inline' , what should I do?
Answered by joulev
not possible. you have to either allow inline style tags, or not use <Image> at all, for the simple reason that <Image> uses inline style tags.

you can use getImageProps https://nextjs.org/docs/app/api-reference/components/image#getimageprops to get the props of a <Image> and pass it to an <img>. then you can freely remove the style tag if you want
View full answer

7 Replies

Air PenguinOP
I still received a CSP error because style={color:unset} was added to the element.so confusing
@Air Penguin When using next/image it always adds inline styles on the image. It adds: style="color:transparent". I tried setting style={{ color: undefined }}, but it doesn't seem to work. Therefore, I'm getting a CSP error. I don't want to add style-src 'unsafe-inline' , what should I do?
joulev
not possible. you have to either allow inline style tags, or not use <Image> at all, for the simple reason that <Image> uses inline style tags.

you can use getImageProps https://nextjs.org/docs/app/api-reference/components/image#getimageprops to get the props of a <Image> and pass it to an <img>. then you can freely remove the style tag if you want
Answer
Air PenguinOP
This means that if I choose CSP, I have to give up the advantage of next/Images?
joulev
use getImageProps above
you cannot use <Image> directly but you can construct one with getImageProps
Air PenguinOP
i see. thank you both very much 🙇‍♂️