Nuxt•2w ago

How to convert <img /> to <NuxtImg />?

I'm trying to convert this <img src="../assets/imgs/Hero.jpg" alt="" /> to <NuxtImg src="../assets/imgs/Hero.jpg" alt="" /> and i get the error in browser

localhost/:12 
            
            
           GET http://localhost:3000/_ipx/assets/imgs/Hero.jpg 404 (IPX_FILE_NOT_FOUND)

7 Replies

kapa.ai•2w ago

Hi @Thick Black W. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To convert an <img> tag to <NuxtImg>, you need to ensure that the image source (src) is compatible with how Nuxt Image expects to resolve and serve images. Problem:
You are using <NuxtImg src="../assets/imgs/Hero.jpg" alt="" /> and getting a 404 error:
GET <http://localhost:3000/_ipx/assets/imgs/Hero.jpg> 404 (IPX_FILE_NOT_FOUND) Reason:
By default, Nuxt Image expects local images to be placed in the public/ directory, not in assets/. The assets/ directory is handled by the build tool (Vite/Webpack) and is not directly accessible at runtime for Nuxt Image. This is why you get a 404 error when using a path like ../assets/imgs/Hero.jpg with <NuxtImg>. Solution:
1. Move your image to the public/ directory.
For example, place your image at public/imgs/Hero.jpg. 2. Update your <NuxtImg> usage to use an absolute path from the public directory root:

   <NuxtImg src="/imgs/Hero.jpg" alt="" />

   <NuxtImg src="/imgs/Hero.jpg" alt="" />

This will work as expected, and Nuxt Image will optimize and serve your image correctly. Reference:

With default provider, you should put /nuxt-icon.png inside public/ directory for Nuxt 3 make the above example work.
<NuxtImg src="/nuxt-icon.png" />
Will result in:
<img src="/nuxt-icon.png">

Nuxt Image Usage

Images should be stored in the public/ directory of your project.

Providers - Local Images Alternative:
If you want to keep your images in a different directory (like assets/imgs), you can configure the dir option in your nuxt.config.ts:

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

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

Then, you can use:

<NuxtImg src="/Hero.jpg" alt="" />

<NuxtImg src="/Hero.jpg" alt="" />

But be aware of the caveats with this approach, especially for static site generation and deployment targets.
Configuration - dir Summary:
- For <NuxtImg>, use images from the public/ directory and reference them with an absolute path starting with /. - Do not use relative paths to assets/ with <NuxtImg>.
- If you must use a custom directory, configure the dir option in nuxt.config.ts, but read the documentation for limitations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Thick Black WOP•2w ago

so in runtime if I used <img > it wouldn't work either? @kapa.ai

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you use a native <img> tag with a relative path like ../assets/imgs/Hero.jpg, it will not work at runtime in Nuxt 3. The assets/ directory is processed by the build tool (Vite or webpack) and is not directly accessible via a URL at runtime. Only files in the public/ directory are served as static assets and can be accessed with a path like /imgs/Hero.jpg in your <img> tag. For example, this will not work:

<img src="../assets/imgs/Hero.jpg" alt="" />

<img src="../assets/imgs/Hero.jpg" alt="" />

But this will work if the image is in the public/ directory:

<img src="/imgs/Hero.jpg" alt="" />

<img src="/imgs/Hero.jpg" alt="" />

Nuxt won't serve files in the assets/ directory at a static URL like /assets/my-file.png. If you need a static URL, use the public/ directory.

Nuxt Docs: Getting Started - Assets So, for runtime access via <img>, always use the public/ directory. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

johntanzer•2w ago

Hey. Are you using pnpm?

Thick Black WOP•2w ago

should I be?

Gaming

Programming

How to convert <img /> to <NuxtImg />?

Did you find this page helpful?