#Images are broken (missing) on production build

4 messages · Page 1 of 1 (latest)

viral stream
#

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~.

ionic bay
#

You want to pass post.resolvedThumbnail to src, not the src property of it

viral stream
#

Thank you, Erika. Sadly, this does not work as well ☹. The same issue – images are O.K. on dev, but missing in build

tawdry sedge
#

Check your build folder if the images are included.