Remote IPX images not loading on Netlify
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
I'm pulling images from a CMS into Nuxt Image. Everything works well in dev, but when I deploy to Netlify (Netlify runs npm run-script build during deployment) the images don't load. I don't see any build errors. The generated src and srcset URLs are the same between dev and Netlify, something like /_ipx/f_jpeg&s_200x200/https://mycms.com/working-url-to-image.jpg. I don't get any console errors when loading the page, no 404s, the images are just "empty" and show the browser's missing image icon.
If I try to load the image directly with https://netlify-app-domain.com/_ipx/f_jpeg&s_200x200/https://mycms.com/working-url-to-image.jpg I get 4 of these errors in the console:
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-Uok2etT07nimvrD0JBY/ZlYS3xAfAdOKAkUmemu2L5w='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
I've tried a bunch of config adjustments, but none of them have had any effect. How can I solve this issue? What config settings are required for IPX to process (and hopefully cache) remote images in production?
image-edge: v1.0.0-27968280.9739e4d
nuxt: v3.2.3
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No repository file or test is named. Start by reproducing the remote-image request with the listed Nuxt, image-edge, and Netlify setup, then inspect the Nuxt Image IPX production configuration and the generated URL; done means remote images load in the deployed app without empty-image behavior or CSP errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- devops, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100