Grab an image based on its file path

[autumn wind]

I know that in Astro we can get images by importing them in our frontmatter, but how do we get images in our own codebase based on its file path?

For example, I want to display a hero image that is based on the image that is added in the git-based cms. It's already inside of the codebase.

The codebase has access to that image file path with caseStudy.data.ogImage, but this would not work:

        <img src={caseStudy.data.ogImage} />

Any ideas on how to tackle that?

[autumn wind]

Ah I got it!
<img src={../${caseStudy.data.ogImage}} />
needed to change the relative file path
sadness

[short peak]

it works without backticks damn

[scenic quartz]

Nah never, surely????????

[short peak]

mine's a question as well wildly confused seeing JSX expression without them**``**

[autumn wind]

I just forgot to add them here haha

[scenic quartz]

Yknow what, I'm actually relieved 😅

[autumn wind]

Turns out this works with a normal img tag, but not the Picture or Image components

The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning

<Picture src={import(`../../${imageDir}`)} alt={caseStudy.data.ogImageAlt || ""} width={1000} height={800} formats={['avif', 'webp']} quality={70} />

Works in dev

fails during build

Cannot find module '/home/jackshelton/dev/clients/ramedia-us/dist/assets/cms/some-data/ogImage.jpg' imported from /home/jackshelton/dev/clients/ramedia-us/dist/$server_build/chunks/prerender_Cbsrl_na.mjs

the picture and image components do not work with a file path

they need an import