How to use @nuxt/image with image from assets

Question

I try to use @nuxt/image with image from assets folder; when using image from static folder or external url, the image is optimised as well; but when on using it on image from assets like below:

<nuxt-img
    src="~assets/img/Icone-accueil/row_left.svg"
    alt=""
    class="float-left margin-fleche"
    quality="30"
/>

I have this result in my html

<img src="/_ipx/q_30/_nuxt/assets/img/Icone-accueil/row_left.svg" alt="" class="float-left margin-fleche">

but the image doesn't appear

Dexamethasone

Your example is using a .svg file, I would not think that nuxt-img would do anything there? – Dan

Answer 1

As per Nuxt Image doc, default direcrtory for images is /static, you can change it by update nuxt.config file as below.

e.g,

image: {
    dir: 'assets/images',
},

Now you can rewrite as,

<nuxt-img
    src="/Icone-accueil/row_left.svg"
    alt=""
    class="float-left margin-fleche"
    quality="30"
/>

Taddeo

when run build the assets directory images not working in nuxt3 – Kinnikinnick

It should be working with same config in Nuxt2 and Nuxt3. check your nuxt-image version if still issue occurs. I have added links for both versions. Nuxt2 Nuxt3 – Taddeo

Answer 2

From nuxt documentation:

Inside your ‍‍vue templates, if you need to link to your assets directory use ~/assets/your_image.png with a slash before assets.

In your case:

<nuxt-img
    src="~/assets/img/Icone-accueil/row_left.svg"
    alt=""
    class="float-left margin-fleche"
    quality="30"
/>

Another quote from nuxt:

When working with dynamic images you will need to use require

<img :src="require(`~/assets/img/${image}.jpg`)" />

In your case check this out:

<nuxt-img
    :src="require(`~/assets/img/Icone_accueil/row_left.svg`)"
    alt=""
    class="float-left margin-fleche"
    quality="30"
/>

Lasagne

i return error 404 IPX: File not found: E:\projet-michel\noah-voyage-git\noah-voyages-version-2\static_nuxt\assets\img\Icone-accueil\row_left.svg – Octastyle

I edited my answer. Check it. Maybe that helps. – Lasagne

Not sure why, but are you sure your settings are not set to work with IPX: image.nuxtjs.org/providers/ipx ? – Effectuate

Answer 3

Using @nuxt/image with images from the assets/ folder does not work in Nuxt v3.

The following is from the @nuxt/image documentation:

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

For example, when using <NuxtImg src="/nuxt-icon.png" />, it should be placed in public/ folder under the path public/nuxt-icon.png.

Image stored in the assets/ directory are not proccessed with Nuxt Image because those images are managed by your bundler (such as Vite or webpack).

Dan

For some reason following the 'installation' section of the docs is breaking my code. I'm using nuxt 3 and I believe that the docs are for the older version. Precisely, I did this in my nuxt.config.ts 1. yarn add --dev @nuxt/image -> then -> added "@nuxt/image" to my nuxt.config.ts modules. Also, I'm new to nuxt so sorry if this is a dumb question. – Osteology

In Nuxt 3, it needs to be the ~/public directory. – Orpheus

if they are in public how do we utilize things like cache busting and nuxt-image together? @DanielMiradakis – Childress

Answer 4

For Nuxt3 users whom are using the edge version, which is v1, of nuxt/image, if you are self-hosting, place images in the 'public' directory as opposed to 'static'.

Quote from v1 docs:

With default provider, you should put /nuxt-icon.png inside public/ directory for >Nuxt 3 make the above example work.

v0 (Nuxt2) /static/images/myImage.jpg v1 (Nuxt3) /public/images/myImage.jpg

Then, access images in the same way others have described. Nuxt/image v1 does not seem able to read a dir named static and of course doesn't read assets as that is used by Webpack.

Millenarianism

Answer 5

This worked for me:

<img :src="require(`~/assets/image.jpeg`)"
      alt=""
/>

Birkett

Answer 6

you must create a custom Provider. this code worked for me:

nuxt.config.ts

image:{
  providers:{
    customProvider:{
       name: 'assetsProvider',
       provider: '~/providers/assets-provider.ts', // must be created
       options:{
         baseURL: "/_nuxt/assets"
       }
      }
     }
    }

for more information click on link https://image.nuxt.com/advanced/custom-provider

Forefather