0

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:

enter image description here

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!

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
ssmith
  • 8,092
  • 6
  • 52
  • 93
  • It looks like the condition `post.frontmatter.featuredimage` is failing for some posts. Try checking for typos in your backend? And if the image is loaded properly in the backend – Akshay Jan 27 '21 at 16:04
  • But why would it work sometimes and not others, @Akshay? – ssmith Jan 28 '21 at 15:43
  • Try logging the data, `console.log(post.frontmatter.title, post.frontmatter.featuredImage)`, see what it shows for each image. – Akshay Jan 28 '21 at 15:50

1 Answers1

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:

enter image description here

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • I do get errors when I try to build locally but haven't been able to resolve them. The images are definitely there, both locally, in GitHub, and in the deployed site. A PR would be great. – ssmith Jan 27 '21 at 16:17