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
MagicEmperor8mo ago
bump
missymae
missymae8mo 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
MagicEmperor8mo 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
Want results from more Discord servers?
Add your server