Nuxt•6d ago

Nuxt Image not displaying images

Hey everyone, I am encountering a problem with @nuxt/image not displaying images. I have created a new nuxt project with @nuxt/image module by itself, here is the reproduction: https://stackblitz.com/edit/github-64kdhed8 Also the playground provided by @nuxt/image has the same result: https://stackblitz.com/github/nuxt/image/tree/main/example

StackBlitz

Image Example Example - StackBlitz

Run official live example code for Image Example, created by Nuxt on StackBlitz

StackBlitz

Image Example Example - StackBlitz

Run official live example code for Image Example, created by Nuxt on StackBlitz

13 Replies

kapa.ai•6d ago

Hi @WizZard. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're having issues with @nuxt/image not displaying images in your Nuxt project. Based on the knowledge sources, there are several common issues that could be causing this problem: Possible Solutions 1. Install Sharp Package One common issue is missing the Sharp package, which is required for image processing:

npm install sharp

npm install sharp

If you're deploying to a Linux server, you might need to rebuild Sharp with the correct architecture:

npm rebuild --arch=x64 --platform=linux --libc=musl sharp

npm rebuild --arch=x64 --platform=linux --libc=musl sharp

This is particularly important in production environments as mentioned in a Stack Overflow post. 2. Check Image Path Configuration The default behavior of Nuxt Image is to look for images in the public directory. If your images are in the assets directory, you need to configure this in your nuxt.config.ts:

export default defineNuxtConfig({
  image: {
    dir: 'assets/img'
  },
})

export default defineNuxtConfig({
  image: {
    dir: 'assets/img'
  },
})

Then you can reference your images like:

<NuxtImg src="/my-image.jpg" />

<NuxtImg src="/my-image.jpg" />

As noted in a Stack Overflow solution. 3. Dynamic Import Issues If you're trying to dynamically import images from assets, the approach is different in Nuxt 3 compared to Nuxt 2. You might need to move your images to the public folder as a workaround, as mentioned in a Stack Overflow discussion. 4. Check for 404 Errors Look at your browser's network tab to see if there are 404 errors like:

GET <http://localhost:3000/_ipx/_/path/to/image.jpg> 404 (IPX_FILE_NOT_FOUND)

GET <http://localhost:3000/_ipx/_/path/to/image.jpg> 404 (IPX_FILE_NOT_FOUND)

This would indicate a path issue. 5. For Static Sites If you're building a static site with nuxt generate and have disabled server-side rendering (ssr: false), you'll need to pre-render your images:

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/your-image.jpg',
        '/_ipx/w_140/your-image.jpg',
        // etc.
      ]
    }
  }
})

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/your-image.jpg',
        '/_ipx/w_140/your-image.jpg',
        // etc.
      ]
    }
  }
})

As explained in the Static Images documentation. Without seeing the specific error messages from your reproduction, it's hard to pinpoint the exact issue. I recommend checking your browser console for errors and trying the solutions above based on what you find. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@321370635584536576> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WizZardOP•6d ago

@kapa.ai this is the error I am encountering:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) mountains_2.jpg:1

Failed to load resource: the server responded with a status of 500 (Internal Server Error) mountains_2.jpg:1

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see you're getting a 500 Internal Server Error when trying to load images with Nuxt Image. This suggests there's a server-side issue with image processing rather than just a path problem. Based on the error message and the knowledge sources, this is likely related to the Sharp image processing library that Nuxt Image uses internally. The 500 error typically occurs when the server component can't properly process the image. Here are some specific solutions to try: 1. Install Sharp explicitly in your project:

   npm install sharp

   npm install sharp

2. If you're deploying to a server (especially Linux), you might need to rebuild Sharp for the correct architecture:

   npm rebuild --arch=x64 --platform=linux --libc=musl sharp

   npm rebuild --arch=x64 --platform=linux --libc=musl sharp

This solution was specifically mentioned in a Stack Overflow post where someone had a similar 500 error in production. 3. Check your server logs for more detailed error messages. The 500 error might be hiding a more specific error about Sharp or image processing. 4. If using IPX provider (the default), make sure your images are in the correct location. By default, they should be in the public/ directory as mentioned in the Providers documentation. 5. Try using a different provider if you're using a specific one, or switch to the default IPX provider if you're currently using something else. 6. Verify image formats - make sure the image formats you're using are supported by Sharp. If you're testing locally, these issues sometimes don't appear in development but show up in production builds. Try running a production build locally (npm run build && npm run preview) to see if you can reproduce and debug the issue in a more controlled environment. Let me know if any of these solutions help or if you need further assistance! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@321370635584536576> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WizZardOP•6d ago

@kapa.ai 1. installing sharp didn't resolve the problem 2. I am not deploying to anywhere 3. I do not have any errors in the server console only in the browser console 4. Yes I am using the default IPX provider, my images are in the public/ directory and I am trying to display them like this: <NuxtImg src="/logo-240x240.png" /> I am encountering the same problem in dev and in prod.

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're still having issues with Nuxt Image despite trying several solutions. Let's focus on your specific setup and error. Since you've confirmed: - You've installed Sharp but still have the issue - You're using the default IPX provider - Your images are in the public/ directory - You're using the correct syntax: <NuxtImg src="/logo-240x240.png" /> - The issue occurs in both development and production environments Here are some more targeted solutions: 1. Check image file permissions - Make sure the image files have proper read permissions. 2. Try specifying dimensions - Sometimes adding width and height can help:

   <NuxtImg src="/logo-240x240.png" width="240" height="240" />

   <NuxtImg src="/logo-240x240.png" width="240" height="240" />

3. Modify the image configuration in your nuxt.config.ts:

   export default defineNuxtConfig({
     image: {
       provider: 'ipxStatic', // Try switching to ipxStatic
     }
   })

   export default defineNuxtConfig({
     image: {
       provider: 'ipxStatic', // Try switching to ipxStatic
     }
   })

4. Import the image directly instead of using a path:

   <script setup>
    import img from '~/public/logo-240x240.png'
   </script>
   <template>
     <NuxtImg :src="img" />
   </template>

   <script setup>
    import img from '~/public/logo-240x240.png'
   </script>
   <template>
     <NuxtImg :src="img" />
   </template>

This approach was suggested in a Stack Overflow post. 5. Check for image format compatibility - Make sure your image format is supported by Sharp. 6. Try using a regular <img> tag to verify if the issue is with the image file itself or with Nuxt Image:

   <img src="/logo-240x240.png" />

   <img src="/logo-240x240.png" />

7. Verify your Nuxt Image version - Make sure you're using the correct version for Nuxt 3:

   npm list @nuxt/image

   npm list @nuxt/image

For Nuxt 3, you should be using @nuxt/image v1.x, not v0.x which is for Nuxt 2 as mentioned in the installation documentation. If none of these solutions work, you might want to try creating a minimal reproduction in a fresh project to isolate the issue further. This could help determine if it's related to your specific project configuration or a more general issue with Nuxt Image. Let me know if any of these suggestions help resolve your issue! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@321370635584536576> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WizZardOP•6d ago

@kapa.ai none of the solutions fix this issue. using the regular img tag everything works fine

Cake•6d ago

@WizZard I've recently had this error using pnpm, it got fixed when I added this to the package.json

  "pnpm": {
    "supportedArchitectures": {
      "os": [
        "win32",
        "darwin",
        "current"
      ],
      "cpu": [
        "x64",
        "arm64"
      ]
    },
    "overrides": {
      "sharp": "0.33.4"
    }
  }

  "pnpm": {
    "supportedArchitectures": {
      "os": [
        "win32",
        "darwin",
        "current"
      ],
      "cpu": [
        "x64",
        "arm64"
      ]
    },
    "overrides": {
      "sharp": "0.33.4"
    }
  }

WizZardOP•6d ago

did you need to install sharp as a dependency too?

Cake•6d ago

nope

WizZardOP•6d ago

ok it worked thank you very much sir :pandaLoveA:

Gaming

Programming

Nuxt Image not displaying images

Did you find this page helpful?