Skip to content

IPX: File not found when using assets directory #1006

Open
@alex-lmt

Description

@alex-lmt

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

madebyfabian commented on Oct 7, 2023

@madebyfabian

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.

For some providers (like vercel), using a directory other than public/ for assets is not supported since resizing happens at runtime (instead of build/generate time) and source fetched from the public/ directory (deployment URL)

alex-lmt

alex-lmt commented on Oct 9, 2023

@alex-lmt
Author

Where do you deploy? According to the docs, other directories than public don't work with e.g. vercel.

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

madebyfabian commented on Oct 9, 2023

@madebyfabian

@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

madebyfabian commented on Oct 9, 2023

@madebyfabian

Ah and do you deploy with nuxt build or nuxt generate?

alex-lmt

alex-lmt commented on Oct 9, 2023

@alex-lmt
Author

@madebyfabian

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.

Yes. For example image from /public/img/image.png this way is working normally:
<NuxtImg src="/img/image.png" />

Ah and do you deploy with nuxt build or nuxt generate?

We are using nuxt build

madebyfabian

madebyfabian commented on Oct 10, 2023

@madebyfabian

@alex-lmt Do you also deploy the assets/img folder?
Docs:

For ipx provider, make sure to deploy customized dir as well.

alex-lmt

alex-lmt commented on Oct 19, 2023

@alex-lmt
Author

Do you also deploy the assets/img folder?

@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

madebyfabian commented on Oct 19, 2023

@madebyfabian

@alex-lmt Is there a reason you want to use the assets folder? Why not just go with the public folder?

alex-lmt

alex-lmt commented on Oct 19, 2023

@alex-lmt
Author

@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

gijsdb commented on Oct 30, 2023

@gijsdb

I am also experiencing this issue.

following.

jieceng

jieceng commented on Nov 21, 2023

@jieceng

I am also experiencing this issue.

following.

fabianwohlfart

fabianwohlfart commented on Nov 22, 2023

@fabianwohlfart

I am also experiencing this issue.
I am not using public folder but a media folder, because I do not want the source images in public 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

l0ggik commented on Nov 28, 2023

@l0ggik

Have the same issue.

Would be great to know how to fix this.

alex-lmt

alex-lmt commented on Nov 29, 2023

@alex-lmt
Author

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

l0ggik commented on Nov 29, 2023

@l0ggik

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

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @davestewart@blowsie@hdwebpros@notflip@Smef

      Issue actions

        IPX: File not found when using assets directory · Issue #1006 · nuxt/image