Nuxt•3d ago

NuxtImg in Nuxt Content

I use this configuration:

  nitro: {
    preset: 'static',
    prerender: {
      routes: ['/'],
      crawlLinks: true,
      autoSubfolderIndex: false,
      failOnError: false, // Ignore Error in build
    },
  },

  nitro: {
    preset: 'static',
    prerender: {
      routes: ['/'],
      crawlLinks: true,
      autoSubfolderIndex: false,
      failOnError: false, // Ignore Error in build
    },
  },

and when i build page i have /ipx/ in src path and my images not showing

11 Replies

kapa.ai•3d ago

Hi @DJ Kondzio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing—where the image URLs are rewritten to include /ipx/ (or /_ipx/) and images are not showing after building your Nuxt site with a static preset—typically relates to how the Nuxt Image module and its default provider (IPX) handle local images in static builds. Key points from the knowledge sources: - By default, Nuxt Image expects local images to be in the public/ directory. If your images are in assets/, they will not be processed by Nuxt Image and will result in 404 errors when accessed via the /ipx/ path. You should move your images to the public/ directory and reference them with a leading slash, e.g., <NuxtImg src="/my-image.jpg" /> for an image at public/my-image.jpg Nuxt Image Providers. - If you want to use a different directory (e.g., assets/img), you must configure the dir option in your nuxt.config.ts:

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

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

Then, reference your images as <NuxtImg src="/my-image.jpg" /> NuxtImg returning 404. - For static sites, if images are not reachable by the crawler (e.g., used in modals or loaded dynamically), you may need to explicitly add the corresponding IPX routes to nitro.prerender.routes to ensure they are generated:

  export default defineNuxtConfig({
    nitro: {
      prerender: {
        routes: [
          '/_ipx/w_120/market.jpg',
          // Add more as needed
        ]
      }
    }
  })

  export default defineNuxtConfig({
    nitro: {
      prerender: {
        routes: [
          '/_ipx/w_120/market.jpg',
          // Add more as needed
        ]
      }
    }
  })

Static Images - If you see /ipx/ or /_ipx/ in your image URLs and the images are missing, it usually means the image file is not found in the expected directory or was not included in the static output. Summary of what to do: 1. Ensure your images are in the public/ directory (or configure the dir option if using another directory). 2. Reference images with a leading slash (e.g., /my-image.jpg). 3. If using dynamic or unreachable images, add their IPX routes to nitro.prerender.routes. 4. Double-check your build output to ensure the images are present in the generated .output/public directory. If you follow these steps and your images are still not showing, please check the build logs for any errors related to image processing or missing files. If you need to use images from assets/, make sure to configure the dir option as shown above. Otherwise, move your images to public/ for the default setup. Let me know if you need more specific help with your configuration! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

DJ KondzioOP•3d ago

@kapa.ai But I use it this way or just in an MD file, and I don’t want to manually map it in nuxt.config. I want it to work automatically. Additionally, I have the images in the public/images folder

    <template v-else #left>
      <NuxtLink :to="header?.to || '/'" class="navbar-brand">
        <NuxtImg class="max-w-[140px]" src="./images/logo.png" alt="Logo" />
      </NuxtLink>
    </template>

    <template v-else #left>
      <NuxtLink :to="header?.to || '/'" class="navbar-brand">
        <NuxtImg class="max-w-[140px]" src="./images/logo.png" alt="Logo" />
      </NuxtLink>
    </template>

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To have images work automatically with <NuxtImg> when they are placed in the public/images folder, you should reference them with an absolute path starting from the public root, not a relative path. In your example, you are using src="./images/logo.png", which is a relative path and will not work as expected with Nuxt Image. Correct usage:

<NuxtImg class="max-w-[140px]" src="/images/logo.png" alt="Logo" />

<NuxtImg class="max-w-[140px]" src="/images/logo.png" alt="Logo" />

This tells Nuxt Image to look for the image at public/images/logo.png, which matches your folder structure. You do not need to manually map anything in nuxt.config for this to work, as this is the default behavior for images in the public/ directory Nuxt Image Providers NuxtImg usage. For Markdown files with Nuxt Content:
You can also use images from the public/ directory in your Markdown content like this:

![my image](/images/logo.png)

![my image](/images/logo.png)

This will work automatically as well Nuxt Content Images. Summary:
- Use absolute paths (starting with /) for images in public/. - No need to configure anything extra in nuxt.config for this use case. - Relative paths like ./images/logo.png will not work with Nuxt Image or in Markdown. If you follow this pattern, your images should display correctly both in Vue components and Markdown files. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

DJ KondzioOP•3d ago

@kapa.ai So it doesn’t work because of that dot at the front?

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, that's correct—the issue is caused by the dot at the front. When using <NuxtImg> (or referencing images in Markdown), you should use an absolute path (e.g., /images/logo.png) instead of a relative path like ./images/logo.png. Nuxt Image expects the src to be an absolute path pointing to the public/ directory, and relative paths will not resolve correctly Nuxt Image Providers NuxtImg usage. So, change:

<NuxtImg src="./images/logo.png" />

<NuxtImg src="./images/logo.png" />

to:

<NuxtImg src="/images/logo.png" />

<NuxtImg src="/images/logo.png" />

and your image should display as expected. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

DJ KondzioOP•3d ago

@kapa.ai That didn’t change anything the images still don’t appear.

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If changing the path to an absolute one (e.g., /images/logo.png) did not resolve the issue and your images are in the public/images folder, there may be another cause. According to the knowledge sources, using <NuxtImg src="/images/logo.png" /> should work out of the box with images in the public/ directory, and no additional configuration is required for this standard use case Nuxt Image Providers NuxtImg usage. If the images are still not appearing, here are some possible reasons based on the documentation: 1. Build Output and Static Generation:
If you are using static generation (nitro.preset: 'static'), Nuxt Image will optimize and save your images locally when your site is generated. However, if images are not reachable by the crawler (for example, if they are only referenced in Markdown or in components that are not directly linked from your routes), they may not be included in the generated output. In such cases, you need to explicitly add the corresponding IPX routes to nitro.prerender.routes Static Images. 2. Image Path and Provider:
The default provider (ipx) expects images to be in the public/ directory and referenced with an absolute path. If you are seeing /ipx/ or /_ipx/ in your image URLs and the images are missing, it usually means the image file is not found in the expected directory or was not included in the static output Nuxt Image Providers. 3. 404 Errors:
If you see 404 errors for your images, double-check that the files actually exist in the public/images directory of your project and that the build output contains them. 4. Nuxt Content and Markdown:
For images referenced in Markdown files, you should also use absolute paths (e.g., /images/logo.png). This should work automatically if the images are in public/images Nuxt Content Images. If you have confirmed all of the above and the images still do not appear, the knowledge sources do not provide enough information to diagnose a more specific cause. There may be an issue with your build process, deployment, or a misconfiguration not covered in the provided documentation. If you can provide any error messages from the browser console or the build logs, that may help narrow down the issue further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

Gaming

Programming

NuxtImg in Nuxt Content

Did you find this page helpful?