Gatsby and NetlifyCMS image when adding image from the CMS

Question

When I add a new image to a blog post it's trying to find the image at "blog/1_3azrmh3wkwrmepqn0w9bgw-1-.png"

But it's not there, I have everything setup under static

NetlifyCMS config

backend:
  name: git-gateway
  branch: master
publish_mode: editorial_workflow
media_folder: '../assets/images'
public_folder: '/assets/images'

collections:
  - name: 'blog'
    label: 'Blog'
    folder: 'packages/common/src/articles'
    create: true
    slug: 'index'
    path: '{{title}}/index'
    editor:
      preview: true
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Slug', name: 'slug', widget: 'string'}
      - { label: 'Tags', name: 'tags', add_to_top: true, minimize_collapsed: true, widget: 'list', field: {name: tag, label: Tag, widget: string}  }
      - { label: 'Keywords', name: 'keywords', widget: 'list', add_to_top: true, minimize_collapsed: true, field: {name: Keyword, label: keyword, widget: string} }
      - label: 'Image'
        name: 'image'
        widget: 'object'
        fields:
          - label: ImageUrl
            name: ImageUrl
            widget: image
          - label: ImageAlt
            name: ImageAlt
            widget: string

      - { label: 'Body', name: 'body', widget: 'markdown' }

Gatsby Config

`gatsby-plugin-netlify-cms`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `articles`,
        path: `../common/src/articles`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `static/assets/images`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `common-images`,
        path: `static/assets/images`
      }
    },

Files

Not sure what is wrong but it's uploading them to the wrong folder

`media_folder` should be relative to the base of the repo, did you try removing `../`? — Robert Dyjas, Feb 26 '21 at 16:22

score 0 · Answer 1 · answered Feb 26 '21 at 19:51

0

Use:

media_folder: static/assets/images
public_folder: /assets/images

media_folder must have the /static folder referred (in addition, remove the first slash since it's not necessary)

answered Feb 26 '21 at 19:51

Ferran Buireu

28,630
6
39
67

I don't think that is working, the markdown file in the CMS is showing the image like so ![Flutter Stats](screen-shot-2021-02-27-at-9.04.01-am.png "Flutter Stats") – Almog Feb 27 '21 at 07:09
It should be /assets no? – Almog Feb 27 '21 at 07:10
Yea it's not working it keeps putting where the articles are maybe its the gasby config not sure what to do – Almog Feb 27 '21 at 07:23
Try removing the relativity of the `media_folder` (`..`) – Ferran Buireu Feb 27 '21 at 07:49
were in the gasby config or cms yaml ? – Almog Feb 27 '21 at 14:37
what I have media_folder: 'static/assets/images' public_folder: '/assets/images' – Almog Feb 27 '21 at 14:41
It's a matter of trials. Pick your base config.yml and remove the relativity – Ferran Buireu Feb 27 '21 at 15:11
Yea I kind of tried different things and still networking – Almog Feb 28 '21 at 14:53

Gatsby and NetlifyCMS image when adding image from the CMS

1 Answers1