I have a folder structure like this:
projects
├── project-name/
├──index.mdx
├──assets/
├──thumbnail.png
I am retrieving the thumbnail images using this (admitedly suspicious) way:
---
// Omitted imports, etc. for brevity
const posts = await getCollection("projects");
const assets = await Astro.glob("/src/content/projects/*/assets/*").then(
(files) => {
return files.map((file) => file.default);
}
);
const postsWithThumbnails = posts.map(post => {
const resolvedThumbnail = assets.find(
(asset) =>
asset?.src?.includes(post.slug) && asset?.src?.includes("thumbnail")
);
return {
...post,
resolvedThumbnail
}
})
---
{
postsWithThumbnails.map((post) =>
<li>
{post.resolvedThumbnail && <Image
src={post.resolvedThumbnail.src}
height={96}
width={96}
alt=""
/>
}
</li>
)
}
The issue is that the images works nice in dev mode, but are missing in production build (either local orr on Netlify). It doesn't matter if I use <Image/> or <img>/, the result is the same. I did update both astro and @ember arrow/image to the latest version, but it's still broken. If I log post.resolvedThumbnail, in dev mode, it is the object with src, etc.; in production, it is apparently undefined. Am I doing something wrong? Thanks~.