NuxtImg not working?
Hey Nuxt Community!
I am a Nextjs transitioning over to Nuxt. I stumbled upon NuxtImg and wanted to make use of it. It seems like I cant make it work. It displays an error icon where the image is supposed to be.
I installed the module.
Used NuxtImg for the component.
Added images into /public/images/file.webp
Added src to NuxtImg as /images/file.webp
Any ideas why? I read somewhere about this being a pnpm issue but I doubt it hasnt been fixed in the 7 months that that one guy complained about it. Any suggestions?
Simple img works.
8 Replies
Hi @Polak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
If your images display correctly with a regular
Your setup appears correct. If
<img> tag but not with <NuxtImg>, there are a few common issues to check based on the knowledge sources:
1. Image Location: For Nuxt 3 and the Nuxt Image module, images referenced with <NuxtImg src="/images/file.webp" /> must be placed in the public/images/ directory. This is the correct approach, and your usage matches the documented pattern. Make sure the file path and extension are correct and case-sensitive, as file systems (especially on Linux) are case-sensitive NuxtImg usage.
2. Module Installation and Configuration: Ensure that @nuxt/image is installed and added to the modules array in your nuxt.config:
No additional configuration is needed for basic usage with local images in public/ Nuxt Image installation.
3. Incorrect src Path: The src for <NuxtImg> should be an absolute path from the public directory, e.g., /images/file.webp. Do not prefix with _nuxt or use relative paths NuxtImg usage.
4. Build/Cache Issues: Sometimes, a stale build or cache can cause issues. Try stopping your dev server, deleting .nuxt, node_modules, and your lockfile, then reinstalling dependencies and restarting the server.
5. Provider/Config Issues: If you have customized the image config in nuxt.config, ensure you haven't set a custom dir that points somewhere else, unless you intend to serve images from a different directory NuxtImage returning 404.
6. Sharp/IPX Errors: If you see errors related to image processing (e.g., 500 errors or IPX errors), it may be due to missing native dependencies like sharp, especially in production or on certain platforms. For local images in development, this is less common, but if you deploy to Linux, ensure sharp is correctly installed and built for your environment nuxt/image module in nuxt 3 causes problem in production.
7. Browser Console/Network Tab: Check your browser's developer tools for the actual network request and error message. If you see a 404 for /images/file.webp or /ipx/_/images/file.webp, double-check the file exists in public/images/ and is accessible.
Summary:Your setup appears correct. If
<img src="/images/file.webp" /> works but <NuxtImg src="/images/file.webp" /> does not, double-check the points above. If the problem persists, please provide the exact error message from the browser console or network tab for more targeted help.
Let me know if you see a specific error code or message—this can help narrow down the issue!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@260534435915628554> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Yes. I get error 500
@kapa.ai I get error 500, what should I install in a step by step guide
Let me check the knowledge base for you again. One moment! :books:
----------------------
If you are getting a 500 error when using
In your project directory, run: or, if you use pnpm: 2. Rebuild
If you are deploying to a Linux server (for example, Ubuntu), you may need to rebuild
Make sure
After installing and rebuilding, restart your Nuxt server to ensure changes take effect. 5. If you still get errors
- Make sure you are using a supported Node.js LTS version. - Try deleting
<NuxtImg>, especially with a message mentioning "IPX" or "sharp", it usually means the image optimization backend (IPX) is failing due to a missing or misconfigured dependency, most commonly the sharp package.
Here is a step-by-step guide based on the knowledge sources:
1. Install the sharp packageIn your project directory, run: or, if you use pnpm: 2. Rebuild
sharp for your environment (especially on Linux servers)If you are deploying to a Linux server (for example, Ubuntu), you may need to rebuild
sharp to match your server's architecture:
This step is important if you see errors like:
nuxt/image module in nuxt 3 causes problem in production
3. Check your nuxt.configMake sure
@nuxt/image is included in your modules array:
4. Restart your development or production serverAfter installing and rebuilding, restart your Nuxt server to ensure changes take effect. 5. If you still get errors
- Make sure you are using a supported Node.js LTS version. - Try deleting
node_modules and your lockfile, then reinstalling dependencies.
- If the error persists, check the error message for more details and consult the Nuxt Image installation troubleshooting section.
If you follow these steps and still encounter a 500 error, please provide the full error message for more specific help.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@260534435915628554> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
https://github.com/nuxt/image/issues/1871 try this im assuming you're using pnpm
GitHub
Sharp module causes error with PNPM. need to manually over ride to ...
Hi, I've seen a lot of people run into this error myself included when using nuxt image with pnpm. "error": { "message": "[500] [IPX_ERROR] \nSomething went wrong insta...
still hasn't been fixed
Hey, thanks for the link.
I tried it and doesn't solve it. Should I install Sharp as well or is it included in Nuxt? I tried googling and found someone saying that the OS could be the issue. I run a Macbook Pro M4 so the apple-sillicon could be the issue... Also saw someone saying that Sharp is a Nodejs package and wont work with Vue. This sounds wrong though.
For anyone else experiencing this, I might have gotten it solved. I am unable to reproduce the error and the image loads perfectly. I tried what Wifi Plug suggested, didnt work. Then I installed sharp and added the solution that Wifi Plug sent. No luck. Then tried to write:
Whilst having sharp installed and the override in the package.json. Now it works. I then removed sharp again and the override and still works. I thnk you can install sharp, do the stuff and then delete it again and it will keep working. To be honest, I don't know what I did but also, us programmers, we live by "if it works, it works". So hopefully it doesnt break haha.
As a added bonus - I have found out it also really depends on your system if this will be an issue you're gonna face. I run a Macbook Pro M4 with pnpm.