Images in a component that's mapping over an array.

[cosmic beacon]

I'm having trouble getting the images to work and I'm not sure why. Here is my component (simplified):

---
import Heading from "@components/elements/Heading.astro";
import { Image } from "astro:assets";

const { columns } = Astro.props;
---

    {
        columns.map((column) => (
                <Image
                    src={ import(`@images/${column.image}`) }
                    alt="alt text"
                    class="mx-auto"
                />
        ))
    }

And here is the content:

<ColumnContent columns={[
        {
            image: "logo1.png"
        },{
            image: "logo2.png"
        },{
            image: "logo3.png"
        }
    ]} />

However if I add the filename directly in the component src={ import(`@images/logo1.png`) } it works.

[sullen crescent]

I believe you have to have the file extension hard-coded and not part of string literal for it to work, so something like:

<Image src={ import(`@images/${column.image}.png`) }
    alt="alt text"
    class="mx-auto"
    />

and then change to image: "logo1"

[cosmic beacon]

Thanks however I'm still getting Cannot find module '@images/logo1.png' imported