Next Image and CSP

[runic tiger]

Hi all 👋

I’m trying to set a strict CSP in a Next.js (App Router) app and want to avoid using style-src 'unsafe-inline'.

However, I’m running into issues with next/image, since it seems to always inject inline styles (e.g. style="color:transparent" or positioning styles when using fill), which then get blocked by CSP.

Is there any recommended way to use next/image without requiring unsafe-inline for styles?

For example:
• Can Next.js be configured to avoid inline styles for <Image />?
• Is there a workaround using nonces or hashes for these styles?
• Or is the only practical solution to switch to a plain <img>?

Would appreciate any insights or best practices 🙏

[west walrus]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[runic tiger]

Push