В этой статье блога мы углубимся в различные методы использования изображений в проектах Gatsby с помощью безголовой CMS Storyblok. Мы рассмотрим различные подходы и предоставим примеры кода, которые помогут вам понять и эффективно реализовать эти методы.

1. Файлы статических изображений:
   Gatsby позволяет импортировать и использовать файлы статических изображений в вашем проекте. Просто поместите файл изображения в каталог src/imagesи импортируйте его в свой компонент. Вот пример:

import React from 'react'
import myImage from '../images/my-image.jpg'
const MyComponent = () => {
  return <img src={myImage} alt="My Image" />
}
export default MyComponent

2. Плагин изображений Gatsby:
   Gatsby предоставляет плагин gatsby-image, который оптимизирует изображения для повышения производительности и отложенной загрузки. Чтобы использовать этот плагин с Storyblok, вы можете получить URL-адрес изображения из API Storyblok и передать его компоненту gatsby-image. Вот пример:

import React from 'react'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
const MyComponent = ({ image }) => {
  const imageData = getImage(image)
  return <GatsbyImage image={imageData} alt="My Image" />
}
export default MyComponent

3. GraphQL и изображения.
   Вы также можете использовать GraphQL для запроса изображений непосредственно из Storyblok. Сначала установите необходимые плагины (gatsby-source-storyblokи gatsby-transformer-sharp). Затем вы можете запросить изображения с помощью GraphQL и визуализировать их в своих компонентах. Вот пример:

import React from 'react'
import { graphql } from 'gatsby'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
const MyComponent = ({ data }) => {
  const image = data.storyblokEntry.image
  const imageData = getImage(image)
  return <GatsbyImage image={imageData} alt="My Image" />
}
export const query = graphql`
  query($slug: String!) {
    storyblokEntry(slug: { eq: $slug }) {
      image {
        childImageSharp {
          gatsbyImageData(layout: FULL_WIDTH)
        }
      }
    }
  }
`
export default MyComponent