Гэтсби: установить фон изображения с помощью frontmatter, GraphQl и Styled-компонентов.

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

  • Я делаю список сообщений в блоге для домашней страницы моего сайта Gatsby.

  • Список состоит из "ящиков", каждый ящик, который ссылается на пост, имеет фоновое изображение.

  • Я передаю это background-image стилевому компоненту, он получает изображение из значения 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 в styled-компоненте:

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 является "нулевым". Я не знаю, что еще делать.

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

Источник

1 ответ

Решение

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

Использование изображения с gatsby-transformer-remark + gatsby-transformer-sharp поиск проблемы

Настроить

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

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

  1. Ваш запрос работает? Проверьте ваш запрос в http://localhost:8000/___graphql. Убедитесь, что поле изображения отображается как узел файла. Попробуйте что-нибудь простое, например 
query {
  allMarkdownRemark {
    frontmatter {
      title
      hero {
        id
        name  <-- just enough to know the file exists
      }
    }
  }
}

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

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

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

использование

  1. Если изображение не отображается в браузере, проверьте и попробуйте найти то, что показано вместо вашего изображения.
  2. Ты используешь gatsby-image? Если это так, убедитесь, что вы передаете что-то, с чем он может работать.
  3. Убедитесь, что ваш компонент изображения получает то, что должен. Если ваш компонент ожидает путь, не передавайте объект, как результат фрагмента.

Некоторое примечание стороны

  • gatsby-remark-images обрабатывать только относительные ссылки в уценке изображения и HTML <img>, так что если ваше изображение живет в переднем плане, оно ничего не сделает.
Источник
Другие вопросы по тегам