Gatsby: установить фоновое изображение через frontmatter, GraphQl и Styled-компоненты
Я знаю, что эта проблема звучит немного сложно, но это не так.
Я постараюсь объяснить это простым способом:
- Я составляю список сообщений в блоге для главной страницы моего веб-сайта Gatsby.
Список состоит из «коробок», каждая коробка, которая ссылается на сообщение, имеет фоновое изображение.
Я передаю это фоновое изображение стилизованному компоненту, он получает изображение из значения опора, которое я вставил в основной элемент <div> (вы найдете пример ниже).
Он отлично работает, пока я не попытаюсь использовать изображение из моей локальной папки в src (вместо использования онлайн-ссылки, которую я просто разместил на главной странице).
Вот что я делал в прошлом и работал:
Я помещаю URL-адрес изображения на передний план файла уценки:
---
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
}
}
}
}
}
`
После этого я вставляю {узел.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 в стилизованном компоненте:
const Article = styled.article`
background-image: url(${props => props.img_background};);
[... etc ...]
`
Этот метод работает.
Теперь я хочу получить изображение из папки «изображения», а не со случайного URL-адреса.
- Я установил Гэтсби-замечание-изображения
- Установите его на gatsby-config.js и поместите путь к какому-либо изображению на передний план.
- Протестируйте все с http://локальный: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
Я думаю, что для решения вашей проблемы необходимо немного больше информации, ничто из перечисленного вами не выглядит неправильным само по себе. Однако так много людей были сбиты с толку обработкой изображений в gatsby, что я пишу контрольный список. Это должно быть общим, но я думаю, что № 5, 8, 9, 12 могут помочь вам найти проблему.
Использование изображения с gatsby-transformer-remark + gatsby-transformer-sharp устранение неполадок
Настраивать
- Ошибка вообще есть? Иногда gatsby все еще успешно компилируется, несмотря на то, что что-то не так. Проверьте консоль на наличие чего-нибудь... красного.
- Вы перезапустили
gatsbyт.е. включили и снова выключили? Попробуйте удалить кеш и общую папку (.cacheиpublic), если вы подозреваете, что с ними что-то не так. - Вы указали папку с изображениями или любую из ее родительских папок в
gatsby-source-filesystem? - В вашем переднем плане путь к изображению относительный к самому файлу уценки? т.е. путь начинается с точки
./relative/path/to/image.png - Во всех уценках есть поле
heroв начале? Если в файле нет поля героя, это будетnull. - Если путь к изображению во вступительной части не является относительным или не связан с файлом, он будет рассматриваться как обычная строка.
Запрос и фрагменты
- Ваш запрос работает? Проверьте свой запрос в http://локальный:8000/___graphql. Убедитесь, что поле изображения отображается как узел «Файл». Попробуйте что-нибудь простое, например
query {
allMarkdownRemark {
frontmatter {
title
hero {
id
name <-- just enough to know the file exists
}
}
}
}
Если ваш hero отображается в виде строки, что-то не так, проверьте настройки еще раз.
Вы используете фрагменты? В настоящее время фрагменты нельзя протестировать в инструменте graphiql, поэтому вам может потребоваться найти определение этого фрагмента и протестировать его вручную. Вот список стандартные, которые идут с
gatsby-transformer-sharpи их определения.Если вы используете пользовательский фрагмент, обязательно определите и экспортируйте его где-нибудь.
использование
- Если изображение не отображается в браузере, проверьте и попытайтесь найти то, что отображается вместо вашего изображения.
- Вы используете
gatsby-image? Если это так, убедитесь, что вы передаете что-то, с чем он может работать. - Убедитесь, что ваш компонент изображения получает то, что должен. Если ваш компонент ожидает путь, не передавайте объект, например результат фрагмента.
Некоторое примечание
gatsby-remark-imagesобрабатывать относительные ссылки только в уценке изображения и html<img>, поэтому, если ваше изображение живет во фронтмастере, оно ничего не сделает.
Рад, что это помогло! Конечно, вы можете сделать это как минимум в двух местах: (1) ваш стилизованный компонент: background: ${({ img }) => img || 'fallbackImage.png'}; (b) Ваш шаблон: <div>{ node.frontmatter.img && <ImageComponent img = {...}> }<div>. Вы также можете изменить gatsby-node.js или передать собственный синтаксический анализатор, но это, вероятно, слишком много.
Так можно ли использовать резервное изображение для стилизованного компонента? background-image: url(${props => props.img_background} || 'fallbackImage.png'); Должно быть хорошо? Я попробую оба, потому что думаю, что проблема не в стилизованном компоненте. Действительно, с первым методом (размещение простой ссылки на изображение на главной странице) проблем не возникло, и он работал. Проблема возникает, когда я начал запрашивать некоторые childImageSharp { ... } . PS: как должно быть gatsby-node.js так?
Я попробовал оба метода, которые вы предложили, но, к сожалению, консоль продолжает говорить мне, что это первый, который я попробовал: background-image: url(${props => props.img_background || 'some-random-image-online.jpg'}); и каким-то образом страница отображается, но все содержимое поля белое. Это второй метод: <Article {node.frontmatter.hero.childImageSharp && img_background=node.frontmatter.hero.childImageSharp.fluid.src } также это дает мне ошибки во время компиляции при запуске gatsby development. Я постараюсь получить некоторую информацию для варианта gatsby-node.js.
Привет @Сантьяго! Извините, я думал, вы имели в виду использование резервного изображения, которое немного отличается (было немного поздно, и мне нужно больше кофе). Вам нужно будет проверить, является ли node.frontmatter.heronull — если поле отсутствует, попытка доступа к childImageSharp вызовет ошибку. Кроме того, похоже, что ваш синтаксис jsx немного неверен — вам нужно выполнить проверку на ноль между тегами элементов, например <div>{ node.frontmatter.hero && <Article {img_background=...}> }</div>. Не стесняйтесь задавать новый вопрос, я уверен, что многие люди над тегами react.js могут вам помочь!
Большое спасибо! Не беспокойтесь о более позднем ответе :) Я не знал, что условие должно быть внутри div! Теперь это работает! Хотя это кажется слишком шаблонным для одного реквизита (вот что я делаю: imgur.com/a/adAky1j). Единственное, что меняется, — это реквизит img_background внутри статьи (он называется Article, потому что это стилизованный компонент для элемента article). В любом случае, это работает хорошо, и я также добавляю резервное изображение, таким образом, если файл уценки не имеет ни свойства hero, ни imghero, поле будет иметь собственное резервное изображение.
Большое спасибо за этот ответ! Я решил проблему, это было нет. 5! Действительно, консоль в браузере говорила о «нулевой» проблеме. Знаете ли вы, есть ли способ сказать Гэтсби, чтобы он просто не ставил никаких изображений, если на переднем плане нет героя?