Description
I'm using Nuxt 3.7.3, Nuxt image 1.0.0-rc.2
In a component, providing image from assets directory as src prop of does not render image, I see "404 IPX: File not found" error in JS console.
Same image with <img>
tag works correctly.
This works:
<img src="~/assets/img/banners/front-page-banner.png" alt="Banner" />
This does not work:
<NuxtImg src="~/assets/img/banners/front-page-banner.png" alt="Banner" />
Import also does not work. This does not work:
<script lang="ts" setup>
import banner from '~/assets/img/banners/front-page-banner.png';
</script>
<template>
<NuxtImg :src="banner" alt="Banner" />
</template>
According documentation https://image.nuxt.com/get-started/configuration#dir I've added assets directory to nuxt.config:
dir: 'assets/img'
Now image is rendered normally using it this way:
<NuxtImg src="banners/front-page-banner.png" alt="Banner" />
But only on local development server, after building and deploying it image is not rendered and same error appears in JS console.
Activity
madebyfabian commentedon Oct 7, 2023
So this would be the correct way after you set the
dir
config:<NuxtImg src="banners/front-page-banner.png" alt="Banner" />
Where do you deploy? According to the docs, other directories than
public
don't work with e.g. vercel.alex-lmt commentedon Oct 9, 2023
I deploy to remote server in our organization intranet using CI/CD. I'm not using vercel, I did not set provider, so assume default image processing provider is used - IPX
madebyfabian commentedon Oct 9, 2023
@alex-lmt Alright. If you don't set the
dir
config and store your images in the/public
folder, does it work in production? Just to confirm that IPX is generally working in your production environment.madebyfabian commentedon Oct 9, 2023
Ah and do you deploy with
nuxt build
ornuxt generate
?alex-lmt commentedon Oct 9, 2023
@madebyfabian
Yes. For example image from /public/img/image.png this way is working normally:
<NuxtImg src="/img/image.png" />
We are using nuxt build
madebyfabian commentedon Oct 10, 2023
@alex-lmt Do you also deploy the
assets/img
folder?Docs:
alex-lmt commentedon Oct 19, 2023
@madebyfabian I'm relatively new in Nuxt, especially to CI/CD stuff, how to add desired directory to deploy or check whether it is being delpoyed or not?
madebyfabian commentedon Oct 19, 2023
@alex-lmt Is there a reason you want to use the assets folder? Why not just go with the public folder?
alex-lmt commentedon Oct 19, 2023
@madebyfabian according documentation and general advices like https://masteringnuxt.com/blog/handling-assets-in-nuxt-3, I choose assets folder as I assume image may change relatively often and I don't care of physical file name (it is ok to process it during build)
gijsdb commentedon Oct 30, 2023
I am also experiencing this issue.
following.
jieceng commentedon Nov 21, 2023
I am also experiencing this issue.
following.
fabianwohlfart commentedon Nov 22, 2023
I am also experiencing this issue.
I am not using public folder but a
media
folder, because I do not want the source images inpublic
to be copied.I run
build
&node .output/server/index.mjs
.Starting this server locally, but also on a custom node setup, it will lead to a 404.
As it not works out-of-the-box with a custom dir, it's very contraintuitive.
Maybe there is an easy solution @danielroe knows?
l0ggik commentedon Nov 28, 2023
Have the same issue.
Would be great to know how to fix this.
alex-lmt commentedon Nov 29, 2023
Hey, people, issue was reported with Nuxt image version 1.0.0-rc.2, it's already 1.1.0 released. Does anyone tried is the issue still exists in newest version?
l0ggik commentedon Nov 29, 2023
Yes i tried it with Version 1.1.0 and it doesn't work.
Could be easyly reproduced locally.
In my case i put all the images in assets/images, set provider to ipx and dir to assets/images in the config.
Def works but as soon as i try build the images are missing.
Also the bild bundle size indicate that the images are processed but the mapping seems to not be correct when build.
47 remaining items