How can I correctly import a list of images defined in markdown frontmatter into an astro layout?

Question

I am building a portfolio website with Astro, where each project has an object with media defined in its markdown frontmatter, like so:

media:
  - text: "descriptive text about first cluster of images"
    paths: ["../images/projects/project_1/img_0.png","../images/projects/project_1/img_1.png","../images/projects/project_1/img_2.png"]
  - text: "descriptive text about second cluster of images"
    paths: ["../images/projects/project_1/img_3.png","../images/projects/project_1/img_4.png","../images/projects/project_1/img_5.png"]
  - text: "descriptive text about third cluster of images"
    paths: ["../images/projects/project_1/img_8.png"]

There is a All images are stored in src/images/projects/project_x/y.png

The imageContainer.astro looks like this:

...
    <div class={image-section}>
        {mediaItem.paths.map((path: string) => 
            <div class="image-container">
                <img src={path} alt="cool images about stuff"/>
            </div>
        )}
    </div>
...

I get the following error when building (I have renamed the paths in the code above and below for readability, so the paths here are not one-to-one the same):

 generating static routes

▶ src/pages/index.astro
 error   Cannot find module 'C:\Users\Niko\Creative\Programming\web\astro\portfolio_v1\dist\chunks\images\projects\project_1\img_1.png' imported from C:\Users\Niko\Creative\Programming\web\astro\portfolio_v1\dist\chunks\pages\all.87c76733.mjs
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\Niko\Creative\Programming\web\astro\portfolio_v1\dist\chunks\images\projects\project_1\img_1.png' imported from C:\Users\Niko\Creative\Programming\web\astro\portfolio_v1\dist\chunks\pages\all.87c76733.mjs

When i run npm run dev, everything works, but when i build, only the alt-text shows up. So how do I get the layout to import the listed images correctly from the object defined in the markdown frontmatter, when building?

I have already tried to make a workaround import statement in the JavaScript / TypeScript section of the layout, where i map out the source to an imported path, like so:

let sources : Record<string, string> = {};

for (let index = 0; index < mediaItem.paths.length; index++) {
    const element : any = mediaItem.paths[index];
    let source = ((await import(element)).default);
    sources[element] = source;
}

And then using the object as a dictionary like this:

...
    <div class={image-section}>
        {mediaItem.paths.map((path: string) => 
            <div class="image-container">
                <img src={sources[path]} alt="cool images about stuff"/>
            </div>
        )}
    </div>
...

This worked with npm run dev but did not build. And gave the same error as above.

How can I correctly import a list of images defined in markdown frontmatter into an astro layout?

0 Answers0