N
Nuxt•3d ago
Lean

NuxtImg not working in production with IPX on Linux (Ubuntu Server 24.04.2, NodeJS 22.14.0)

NuxtImg looks to be broken in prod mode on linux, but interestingly enough, was working fine under windows before i tried actually deploying. All images, except for one which also isnt working, are stored under public/images. Im getting these errors in the browser console. Any clue as of what might be going on ? The image/background for my hero section which was applied with background-image css is working fine.
No description
6 Replies
kapa.ai
kapa.ai•3d ago
Hi @Lean. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on your description, it sounds like you're experiencing issues with the Nuxt Image module in production on your Ubuntu server, specifically with the IPX provider. This is a common issue when deploying to Linux environments. The Problem The error you're seeing is likely related to the sharp package, which is a dependency of the IPX image provider in Nuxt Image. When you deploy from a Windows environment to a Linux server, the pre-built binaries for sharp that were installed on your Windows machine aren't compatible with Linux. Solution The most effective solution is to rebuild the sharp package for your Linux environment. Based on the knowledge sources, you should: 1. Install the sharp package explicitly in your project: 
npm install sharp
npm install sharp
2. Rebuild sharp for your Linux environment: 
npm rebuild --arch=x64 --platform=linux --libc=musl sharp
npm rebuild --arch=x64 --platform=linux --libc=musl sharp
This command rebuilds the sharp package specifically for Linux x64 architecture with musl libc, which should resolve the compatibility issues Stack Overflow solution. Alternative Solutions If rebuilding sharp doesn't work, you can try these alternatives: 1. Install sharp with verbose logging to identify specific errors: 
npm install --ignore-scripts=false --foreground-scripts --verbose sharp
npm install --ignore-scripts=false --foreground-scripts --verbose sharp
2. Install sharp specifically for your Linux environment: 
npm install --platform=linux --arch=x64 sharp
npm install --platform=linux --arch=x64 sharp
Configuration Check Also ensure your nuxt.config.ts has the proper image configuration: 
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    // If your images are in public/images
    dir: 'public'
  }
})
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    // If your images are in public/images
    dir: 'public'
  }
})
If your images are in a different directory, adjust the dir setting accordingly Get Started: Configuration. Note on Image Paths For images in the public directory, make sure you're using the correct path format: 
<NuxtImg src="/images/your-image.jpg" />
<NuxtImg src="/images/your-image.jpg" />
Note the path starts with / and doesn't include public in the path. If the issue persists, you might want to check the Nuxt Image troubleshooting section or consider using a different image provider like Netlify or Vercel if you're deploying to those platforms. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@401116245857927199> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Lean
LeanOP•3d ago
@kapa.ai tried all 4 suggested solutions and even the config check, same thing
kapa.ai
kapa.ai•3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry to hear that none of the suggested solutions worked for your issue with Nuxt Image in production on Ubuntu. Let's explore some additional troubleshooting steps. Further Troubleshooting Since you've already tried rebuilding Sharp for Linux and the other suggested solutions, let's consider some deeper issues: 1. Check Sharp Installation: Verify if Sharp is properly installed by running a test command on your server: 
   node -e "require('sharp')"
   
   node -e "require('sharp')"
If this throws an error, there's still an issue with Sharp. 2. Check Server Dependencies: Sharp may require additional system dependencies on Ubuntu. Make sure you have the necessary libraries: 
   sudo apt-get update
   sudo apt-get install -y build-essential libvips-dev
   
   sudo apt-get update
   sudo apt-get install -y build-essential libvips-dev
3. Static Image Generation: If you're using nuxt generate for a static site, you might need to pre-render your image routes as mentioned in the documentation: 
   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: [
           '/_ipx/w_120/your-image.jpg',
           // Add other image routes you need
         ]
       }
     }
   })
   
   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: [
           '/_ipx/w_120/your-image.jpg',
           // Add other image routes you need
         ]
       }
     }
   })
Static Images 4. Try a Different Provider: If IPX continues to cause issues, consider switching to a different provider that might be more compatible with your setup. 5. Move Images to Assets: As a workaround, you could move your images to the assets directory instead of public. Note that images in assets are processed by your bundler (Vite or webpack) rather than Nuxt Image Get-started: Providers. 6. Check for Version Compatibility: Ensure you're using compatible versions of Nuxt and Nuxt Image. For Nuxt 3, you should be using @nuxt/image v1.x Installation. If none of these solutions work, you might want to consider: 1. Creating a minimal reproduction of your issue and opening a GitHub issue on the Nuxt Image repository 2. Temporarily using standard <img> tags until you can resolve the issue 3. Using a CDN-based image provider instead of the local IPX provider Would you be able to share more details about your specific setup or any error messages you're seeing in the server logs? That might help narrow down the issue further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@401116245857927199> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
johntanzer
johntanzer•2d ago
Hey, what does your ipx config look like? *nuxtimg

Did you find this page helpful?