Kevin Powell - Community•3mo ago

Astro : How to import local images in framework components that will work in the build

For normal astro components, I can use import(...) in my <Image/> component ; however, in my use case, I am dynamically rendering content through JSON, and my file paths start from /src/assets/.... I am passing them as they are to my React components. They work just fine in development, but show an "image not found" error in the production build.

export interface Props {
  title: string;
  description: string;
  resource?: string; (this is the file path i.e : /src/assets/default.webp)
  href: string;
  category: string;
}


using them like this 

  <img
              className="w-full h-auto"
              width="1209"
              height="890"
              loading="lazy"
              decoding="async"
              alt=""
              aria-hidden="true"
              src={resource}
            />

export interface Props {
  title: string;
  description: string;
  resource?: string; (this is the file path i.e : /src/assets/default.webp)
  href: string;
  category: string;
}


using them like this 

  <img
              className="w-full h-auto"
              width="1209"
              height="890"
              loading="lazy"
              decoding="async"
              alt=""
              aria-hidden="true"
              src={resource}
            />

Any help is much appreciated , thank you

3 Replies

MagicEmperor•3mo ago

bump

missymae#2783•3mo ago

Can you use static imports, ie. do you know all the images you'll need when you build production? In that case you could static import and pass a reference as prop instead of a filepath string. The paths are OK, but the package needs to know which image assets are required at build time, I think. At least I think that's right if assets aren't in /public.

MagicEmperor•3mo ago

No they are all dynamic Maybe I am being confusing, but all in all i have a json with object containing a image url it can be a simple /src/asset/img or it can be a http link to a public url of an image

Gaming

Programming

Astro : How to import local images in framework components that will work in the build