Изображения не отображаются на NetlifyCMS и GatsbyJS

Я не могу заставить изображения работать в моем блоге, который использует NetlifyCMS и GatsbyJS. Я не уверен, что делаю не так.

Вот мой конфиг для NetlifyCMS

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

Коллекции статей

folder: 'packages/common/src/articles'

Конфигурация Gasbyjs для CMS

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

Конфигурация моего гэтсби для файлов

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `common`,
        path: `../common/src/assets/`
      }
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `../common/src/data/`
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `../common/src/assets/images/favicon.png` // This path is relative to the root of the site.
      }
    },

и моя папка проекта  введите описание изображения здесь


person Almog Koren    schedule 26.02.2021    source источник


Ответы (1)


Измените config.yml пути с:

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

На что-то похожее на:

   name: git-gateway
   branch: master
   publish_mode: editorial_workflow
   media_folder: 'static/assets/images/uploads'
   public_folder: '/assets/images/uploads'

Примечание: я бы вряд ли стал избегать относительных путей в этих конфигурациях носителей. Конечно, адаптируйте его под свои нужды, но сохраните папку /static для media_folder и косой черты (/) в начале public_folder.

Вам нужно будет использовать статическую папку, поскольку это единственный способ сделать внешние изображения доступными из запросов /public папок, как вы можете видеть в , предоставленное Netlify:

media_folder: static/img
public_folder: /img
person Ferran Buireu    schedule 26.02.2021
comment
Я думал, что общая папка должна быть статичной. У меня нет общей статической папки? - person Almog Koren; 26.02.2021
comment
Все изображения в common / assets / images / портфолио создаются на localhost: 8000 / static. - person Almog Koren; 26.02.2021
comment
static папку необходимо поместить в корень проекта. Общая папка создается после компиляции кода. - person Ferran Buireu; 26.02.2021
comment
Проект настроен немного иначе - person Almog Koren; 26.02.2021
comment
В любом случае вам необходимо уведомить Netlify о том, где находятся эти активы, поэтому статическая папка должна присутствовать в конфигурации. - person Ferran Buireu; 26.02.2021
comment
Да, но я это сделал, все мои изображения в проекте находятся в пакетах / common / src / assets / images. Я загружаю все файлы блога в пакеты / common / src / assets / images / uploads. Это работает, но изображения не отображаются. на сайте - person Almog Koren; 26.02.2021
comment
Когда вы запускаете сборку gatsby, она должна помещать их в пакеты / Landing-gatsby / public / static. - person Almog Koren; 26.02.2021
comment
Если config.yml настроен так, как я написал, и изображения правильно сохраняются в общей папке, чего не хватает, если относительность путей в источниках - person Ferran Buireu; 26.02.2021
comment
То, что вы написали, не работает и не может быть правильным, вы написали media_folder: 'static / common / src / assets / images / uploads', в папке мультимедиа хранятся файлы в репо в моем проекте, все файлы находятся в общем / src / активы / изображения / загрузки - person Almog Koren; 26.02.2021
comment
Все очень просто. Если вы хотите использовать изображения в Gatsby + Netlify, вы должны изменить свои медиафайлы и общие папки на то, что я написал. Основываясь на представленных примерах и сосредоточьтесь на них: netlifycms.org/docs / configuration-options / Это связано с тем, что подход должен осуществляться через папку / static, иначе ваш код не будет знать, где находятся изображения, и пути будут нарушены. Адаптируйте пути, которые я написал, к вашим потребностям, важная часть - использовать папку / static. - person Ferran Buireu; 26.02.2021
comment
Изображения работают нормально для всего моего сайта, но не для блога, поэтому Gatsby + Netlify настроены правильно, это как-то связано с тем, как настроен NetlifyCMS - person Almog Koren; 26.02.2021
comment
Давайте продолжим это обсуждение в чате. - person Ferran Buireu; 26.02.2021
comment
По какой-то причине он пытается найти здесь изображения после публикации нового сообщения almog.io/blog/screen-shot-2021-02-26-at-11.47.32-am.png и у меня есть эта public_folder: '/ packages / landing-gatsby / public / static 'Может быть, это должна быть public_folder:' / packages / landing-gatsby / public / static / images ' - person Almog Koren; 26.02.2021