Разрывы изображений между localhost и Netlify с помощью NetlifyCMS - PullRequest
Новая
       93

Разрывы изображений между localhost и Netlify с помощью NetlifyCMS

1 голос
/ 24 марта 2019

Хорошо, я довольно новичок в JAMstack, React, GatsbyJS, NetlifyCMS и Netlify, так что простите меня, если это просто.

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

Когда я добавляю изображение в раздел тела любой страницы через NetlifyCMS, я затем вытягиваю репозиторий, изображение просто не появляется и заменяется значком сломанного изображения. Тем не менее, кажется, что работает нормально, когда на Netlify.

Время от времени это появляется, но после нажатия или вытягивания или перезапуска сервера разработки Gatsby, он просто снова ломается.

Кажется, что это происходит только при добавлении изображения через NetlifyCMS в основной текст, поэтому оно появляется в основном содержимом файла уценки; на первый взгляд, все работает нормально.

Кажется, я потратил много часов на это. У меня установлен полный набор плагинов, и я не могу найти никого, кто сталкивался с этой проблемой.

Кажется, что все остальные HTML работают нормально, но эти изображения на самом деле не хотят.

Гэтсби-config.js 

  siteMetadata: {
    title: 'Sheringham Shantymen',
    description: 'The Shantymen travel widely throughout the UK and Ireland supporting Lifeboat Stations in their fundraising efforts and are always considering how they can help in others to raise funds by performing concerts.',
  },
  plugins: [
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
        "gatsby-remark-copy-linked-files",
        "gatsby-plugin-netlify-cms-paths",
          {
            resolve: 'gatsby-remark-relative-images',
            options: {
              name: 'uploads',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 1600,
            },
          }
        ],
      },
    },
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass',
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'uploads',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/img`,
        name: 'images',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/gigs`,
        name: 'gigs',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/discography`,
        name: 'discography',
      },
    },
    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Source Sans Pro', 'Source Serif Pro']
        }
      }
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "Sheringham Shantymen",
        short_name: "Shantymen",
        start_url: "/",
        background_color: "#172957",
        theme_color: "#FAC43E",
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: "standalone",
        icon: "src/img/logo-badge.png", // This path is relative to the root of the site.
      },
    },
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    {
      resolve:'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
      options: {
        develop: true,            // Activates purging in npm run develop
        purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
      },
    }, // must be after other CSS plugins
    'gatsby-plugin-netlify', // make sure to keep it last in the array
  ],
}

Компонент Content.js 

import PropTypes from 'prop-types'

export const HTMLContent = ({ content, className }) => (
  <div className={className} dangerouslySetInnerHTML={{ __html: content }} />
)

const Content = ({ content, className }) => (
  <div className={className}>{content}</div>
)

Content.propTypes = {
  content: PropTypes.node,
  className: PropTypes.string,
}

HTMLContent.propTypes = Content.propTypes

export default Content

Вызывается на странице шаблона:

<PageContent className="content" content={content} />

Я ожидаю добавить изображение в текст уценки, чтобы Гэтсби обработал изображение и вывел его как обработанное / размытое изображение загрузки, и чтобы это работало согласованно на всех серверах (localhost и Netlify).

Вместо этого, когда он первоначально выводит (иногда) это огромное изображение, вырывается из контейнеров, затем после перезапуска сервера или аналогичного изображения просто разрывается.

1 Ответ

2 голосов
/ 25 марта 2019

Оказалось, что это была небольшая ошибка в версии Netlify CMS, которую я запускал - я обновил версию 2.6.1 до 2.8.0, и это исправило проблему (по состоянию на 2.7.0).

...