Kevin Powell - Community•9mo 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

MagicEmperorOP•9mo ago

bump

missymae•9mo 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.

MagicEmperorOP•9mo 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