CODEWITHSUNDEEP
reactjsmarkdowngatsbygatsby-image
0xgareth
0xgareth

Reputation: 621

Gatsby Starter Blog images not loading

i'm using the gatsby starter blog template to create a personal blog. I have made modifications to enhance a few features, though I haven't made any changes to image handling.

With that said, images do not seem to be rendering on the page when createPage is constructing log posts from the markdown files.

Markdown file image call

![linksx](./links.jpg) ![links1](../pages/roam-research-intro/links1.jpg)

Here I'm trying out if the image needs to be I the same folder as the markdown file, or in the same folder as the page template - neither works.

Files

enter image description here

Gatsby config

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1000,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },

Result

result

Upvotes: 2

Views: 581

Answers (3)

kasperlauge
kasperlauge

Reputation: 209

As I ended up at this post I just want to share the problem I faced. The inline images from the markdown didn't show in my case because of the file extensions. As I used images saved directly from the "Snipping Tool" in windows it saved the images with a ".PNG"-extension (uppercase). It didn't work untill I changed the extension to ".png" (lowercase).

The problem I then faced was double as it then started to work locally, but did still not work when deployed. That happened because Git did not detect the filename change, as it was only the casing that was changed. I ended up making Git detect the filename change by doing:

  1. Rename image.PNG -> image1.png
  2. git add and commit
  3. rename image1.png -> image.png
  4. git add and commit

Hope that can help someone else, facing the same problem.

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281626

Since both markdown and images are in the same directory you can simply specify the image like below

![linksx](./links.jpg)
![links1](./links1.jpg)

If they were in different directories, you would need to configure the gatsby-source-filesystem

Check the documentation for more information

{
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
      },
    },

and use a relative path

Also ensure that the max size of image doesn't exceed the the maxWidth or else the images won't load. You can set a high enough value for maxWidth in case you cannot trim down the images

Upvotes: 1

0xgareth
0xgareth

Reputation: 621

As Shubham pointed out, the problem comes from the images being far too large. Once trimming their width down, they can be displayed on the screen.

It would be helpful to know if there's a way to auto shrink images to fit within the max width.

Upvotes: 0

Related Questions