I'm trying to build a gallery-like demo site using new experimental assets feature. To do so I put a src/data/photos.json which contains metadata for each photo (file, credit, etc.), and create a dynamic routes that tries to import those files using dynamic import()s. And it doesn't work.
---
import { getImage } from 'astro:assets';
import Layout from '../../components/Layout.astro';
import photos from '../../data/photos.json';
export async function getStaticPaths() {
return photos.map((item) => {
return {
params: {
photo: item.url.slice(28), // stripping `https://unsplash.com/photos/`
},
props: {
file: item.file,
credit: item.credit
},
};
});
}
const { file, credit } = Astro.props;
const image = await getImage({
src: `../../assets/${file}`,
width: 1000,
height: 2000,
});
const title = `Photo by ${credit}`;
---
<Layout name={title}>
<figure>
<img src={image.src} />
<figcaption>Photo by {credit}</figcaption>
</figure>
</Layout>