Как отобразить изображение Contentul с Гэтсби

Question

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

contentfulAsset(title: {eq: "kevin"}) {
  file {
    url
    fileName
  }
}

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

Они объясняют ситуацию только с изображениями, кратными множеству, и узлом ...

{node.image[0].resolutions.src && (
  <Img
    style={{ margin: 0 }}
    resolutions={node.image[0].resolutions}
  />
)}

Answer 1

Мой первый совет - всегда использовать страницу GraphiQL при разработке.он дает вам представление о том, как использовать результаты запроса для ваших компонентов.

http://localhost:8000/___graphql

Ваш запрос зависит от того, как вы хотите отобразить свое изображение.

Предположим, что вы сохранили изображение с именем поля myImage в Asset модель содержимого в Содержимое .

Отображение с тегом HTML5 <img />

Если вы хотите использовать простой тег <img />

ваш запрос

contentfulAsset(title: { eq: "kevin"}}) {
  title
  file {
    url
  }
}

ваш компонент

// ...
const MyComponent = props => {
  const myImage = props.data.contentfulAsset;

  return <img src={myImage.file.url} alt={myImage.title} />
}

Дисплей с плагином gatsby-image

Если вы хотите воспользоваться плагином gatsby-image, вам сначала нужно узнать, хотите ли вы использовать дочерний элемент resolutions или sizes в своем запросе.

См. документация gatsby-image для получения дополнительной информации.

Затем вы можете использовать запрос Фрагмент , доступный с gatsby-source-contentful.

См. https://www.gatsbyjs.org/packages/gatsby-image/#gatsby-source-contentful

ваш запрос

Допустим, мы хотим отобразить адаптивное изображение с эффектом размытия при загрузке в формате Webp:

contentfulAsset(title: { eq: "kevin"}}) {
  title
  sizes(quality: 100) {
    ...GatsbyContentfulSizes_withWebp
  }
}

Примечание: по умолчанию качество resolutions и sizes установлено на 50. Поэтому в этом запросе я установил его на 100

ваш компонент

const MyComponent = props => {
  const myImage = props.data.contentfulAsset;

  return <Img sizes={myImage.sizes} alt={myImage.title} />
}

---

Как и большинство официальных плагинов Gatsby, вы можете найти очень хороший пример в папке examples в репозитории GitHub:

https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful