#Can a slug be used to create src of <Image/>

2 messages · Page 1 of 1 (latest)

versed wren
#

Imagine a file src/pages/[plot].astro:

...
const {plot} = Astro.params;
const data = await import("../data/inventory.json").then(module=>module.default);
const myimage = await import(../data/images/${data[plot]['image_primary']['filename']});

<Image src={myimage} alt=""/>

Here, the image filename and text from a row of data generate an html page, and astro via <Image/> handles compression, naming, bundling etc. However, I can't seem to get this to work no matter how I rearrange the code. (I just installed astro today). Is there some sort of trick for this pattern? Or would I be better off to preprocess the images without <Image/> and store them in public, or perhaps leverage slug with client only (ie non-ssr, output:static) endpoint... ideas?

cyan atlas
#

You’ll need the .default on the image import as well. This works for me:

---
const myimage = (await import('../images/myimage.png')).default
---
<img src={myimage} />

So does a more complicated async calculation of the image path:

const myimage = await (async () => {
  const data = (await import('path/to/data.json')).default
  return (await import(`../images/${data[foo].bar}`).default
})()