decaporg / gatsby-starter-decap-cms

Example Gatsby + Decap CMS project
https://gatsby-netlify-cms.netlify.app/
MIT License
2.07k stars 980 forks source link

Images uploaded with netlify cms doesn't display on the blog site #575

Open radekstasiak opened 4 years ago

radekstasiak commented 4 years ago

Hi,

when Im trying to add new post to my blog and include image then the image never appears Here's an example - created a post titled "welcome" https://myblog.com/blog/welcome/

In the netlify cms I can see the image being displayed in the preview window when creating the post. After I save it and open post on my blog image cannot be displayed. Here's the path to the image taken from my blog: https://myblog.com/blog/welcome/assets/blog.jpeg

In the file structure, the image itself is saved under: static/assets/blog.jpeg

page itself is saved under: content/blog/welcome.md

Here's my config.yml `

backend: name: github repo: myusername/reponame

media_folder: static/assets public_folder: assets

collections: name: blog label: Blog folder: content/blog create: true fields:

  • { name: path, label: Path }
  • { name: date, label: Date, widget: date }
  • { name: title, label: Title }
  • { name: description, label: Description }
  • { name: body, label: Body, widget: markdown } `

To resolve this issue I have tried with different images and also to edit gatsby-config.js - thought that editing line below from content to static would help but didn't change much:

{ 
  resolve: `gatsby-source-filesystem`, 
  options: { 
   path: `${__dirname}/content/assets`, 
    name: `assets`, 
  }, 
},

It's fresh out of the box installation, is it a bug or Im missing some essential steps in the config?

Also, when creating a post Im asked to provide a path - what's that for?

Thanks for Your effort to help me make it work!

Estebank94 commented 4 years ago

I am having the same issue

usrrname commented 4 years ago

I'm having the same issue but using Cloudinary (checkout my setup at here). I ended up using markdown in the markdown widget to include images by absolute url.

matheusdamiao commented 2 years ago

I recently had the same problem. I spent hours looking for some config mistake, but didn't find. @radekstasiak The way I solved was using the html tag <img> instead of <GatsbyImage> inside my component, which was my blog template component. In my case, just like yours, I suppose, the image path is correct and the picture is actually saved after the code is built.