javascript - Why does Gatsby-JS randomly lose featuredimage images?

Question

I'm using GatsbyJS for my blog, source in GitHub, hosted in Netlify. The whole thing is open source so you can check it out here if it helps.

I've been using GatsbyJS for almost a year now and this issue has persisted for that whole time. Randomly, the featuredimage for posts will disappear. One deployment it's there. The next it's gone. I haven't found any rhyme or reason why, and there's nothing in the Netlify build logs that indicates what the issue might be.

Any idea why this would change for content that's not changing? The images are there. You can manually access them even when they don't appear with a given post. But for some reason Gatsby's not showing it.

Here's a screenshot of my main blog page. Every one of these listed articles has a featuredimage. But half don't show up:

Current link to this page

I'm not sure if I should include my package.json or gatsby-config.js here. They're in the repo I shared but if I should paste them into this question I can.

Thanks in advance!

question from:https://stackoverflow.com/questions/65922831/why-does-gatsby-js-randomly-lose-featuredimage-images

Answer 1

In your blog-list.js component (line54):

<header>
  {node.frontmatter.featuredimage ? (
    <div className="featured-thumbnail">
      <PreviewCompatibleImage
        imageInfo={{
          image: node.frontmatter.featuredimage,
          alt: `featured image thumbnail for post ${title}`,
        }}
      />
    </div>
  ) : null}
</header>

The condition (node.frontmatter.featuredimage) is not being validated as true and it's returning an empty tag:

You should be able to reproduce the same behavior locally, building and serving your project. It seems that the image maybe is not properly uploaded

I will try to take a look and make a PR if applies but you need to fix all the errors that block the compilation. The code is not ready to be published with all the errors related to the images.

Try adding gatsby-plugin-netlify-cms-paths plugin as an option of the gatsby-transformer-remark plugin and outside it like:

module.exports = {
  plugins: [

        `gatsby-plugin-netlify-cms-paths`,
                {
          resolve: `gatsby-transformer-remark`,
          options: {
            plugins: [
              `gatsby-plugin-netlify-cms-paths`,
            ],
          },
        },
    
      ],
    }

In order to transform all markdown-related paths.

---

Other considerations

The images are there. You can manually access them even when they don't appear with a given post. But for some reason Gatsby's not showing it.

Of course, you are copying them using:

  {
    resolve: 'gatsby-remark-copy-linked-files',
    options: {
      destinationDir: 'static',
    },
  },

This will copy all the markdown referenced assets into the static folder, when building, the static folder will be transpiled to the /public folder with the same internal structure so, your images will be there, but your markdown files may still be wrong referenced or with the paths wrong constructed.