Question

Я знаю, что эта проблема звучит немного сложно, но это не так.
Я постараюсь объяснить это простым способом:

Я делаю список сообщений в блоге.для домашней страницы моего сайта Гэтсби.
Список состоит из «ящиков», каждый ящик, который ссылается на пост, имеет фоновое изображение.
Я передаю это фоновое изображение стилизованному компоненту, оно получает изображение из значения prop , которое я вставил в основной элемент
(выниже приведу пример)
Работает нормально , пока я не попробую использовать изображение из моей локальной папки в разделе src (вместо использования онлайн-ссылки, которую я просто поместил на frontmatter).

Вот что я делал в прошлом и работал:
Я поместил URL-адрес изображения на frontmatter файла уценки:

---
slug: "/post/my-post"
 [...]
imghero: "https:/path/to/image-online.jpg" 
---

Затем запросите его с помощью graphql:

const LISTING_QUERY = graphql`
        query BlogPostListing {
            allMarkdownRemark(limit: 10, sort: {
                order: DESC,
                fields: [frontmatter___date]
            }) {
            edges {
                node {
                excerpt
                frontmatter {
                    title
                    slug
                    date(formatString: "MMMM DD, YYYY")
                    imghero
                }
                }
            }
            }
        }
`

После этого я вставлю {node.frontmatter.imghero} в подпорку на главном div:

const Listing = () => (
    <StaticQuery 
        query={LISTING_QUERY} 
        render={({allMarkdownRemark}) => ( 
            allMarkdownRemark.edges.map(({node}) => (
                <Article img_background={node.frontmatter.imghero} key={node.frontmatter.slug}>
                [... etc ...]
                </Article>
            ))
        )}
    />
)

export default Listing

И, наконец, я называю это img_background prop в styled-component:

const Article = styled.article`
    background-image: url(${props => props.img_background};);
    [... etc ...]
`

Этот метод работает.

Теперь я хочу получить изображение из папки «images», а не из случайного URL.

Я установил gatsby -mark-images
Установите его на gatsby-config.js и укажите путь к некоторому изображению наfrontmatter.
Проверьте все с помощью http://localhost:8000/___graphql (и сработало)

Вставьте дополнительный запрос через graphql:

[...]
frontmatter {
date(formatString: "DD MMMM, YYYY")
title
imghero
hero {
    childImageSharp{
        fluid(maxWidth: 630) {
            ...GatsbyImageSharpFluid
        }
    }
}
[...]

Я изменяю узел компонента с новым путем:

<Article img_background={node.frontmatter.hero.childImageSharp.fluid} [...]> 
    [...] 
</Article>

Gatsby Develop скомпилируется нормально.

Но тогда моя домашняя страницаполностью белый.
И консоль браузера говорит, что node.frontmatter.hero "null" .Я не знаю, что еще делать.

Спасибо за помощь.

Derek Nguyen · Answer 1 · 18 февраля 2019

Я думаю, что для решения вашей проблемы требуется немного больше информации, ничего из перечисленного вами не выглядит само по себе неправильным.Однако так много людей были сбиты с толку обработкой изображения в Гэтсби, что я пишу контрольный список.Он должен быть общим, но я думаю, что 5, 8, 9, 12 могут помочь вам найти проблему.

Использование изображения с `gatsby-transformer-remark` + `gatsby-transformer-sharp` устранение неисправностей

Настройка

Есть ли вообще ошибка?Иногда Гэтсби все равно успешно компилируется, несмотря на что-то не так.Проверьте консоль на наличие всего красного ...
Вы перезапустили gatsby, т.е. включили и выключили снова?Попробуйте удалить кэш и общую папку (.cache и public), если вы подозреваете, что с ними что-то не так.
Вы указали папку с изображениями или любую из ее родительских папок в gatsby-source-filesystem?
В вашем frontmatter, путь к изображению относительно самого файла уценки?т.е. путь начинается с точки ./relative/path/to/image.png
Есть ли во всей уценке поле hero во frontmatter?Если у файла нет поля героя, это будет null.
Если путь к изображению в frontmatter не является относительным или не ссылается на файл, он будет рассматриваться как обычныйстрока.

Запрос и фрагменты

Ваш запрос работает?Проверьте ваш запрос в http://localhost:8000/___graphql. Убедитесь, что поле изображения отображается как узел файла.Попробуйте что-нибудь простое, например

query {
  allMarkdownRemark {
    frontmatter {
      title
      hero {
        id
        name  <-- just enough to know the file exists
      }
    }
  }
}

Если ваш hero отображается как строка, что-то не так, проверьте настройку еще раз.

Вы используете фрагменты?В настоящее время фрагменты не могут быть протестированы в инструменте graphiql, поэтому вам может потребоваться найти определение этого фрагмента и проверить его вручную.Вот список значений по умолчанию, которые поставляются с gatsby-transformer-sharp и их определений.

Если вы используете пользовательский фрагмент, обязательно определите и экспортируйтеэто где-то.