Какова цель компонента Image в стартере gatsby-starter-default?

Question

Я не знаю, должен ли файл image.js в папке компонентов принимать аргументы, указывающие такие вещи, как «жидкость по сравнению с фиксированным», размер изображения, какое изображение должно быть отображено и т. Д., А затем визуализировать любое изображение в соответствии саргументы.

Если нет, является ли стандартное использование image.js для создания нового файла на основе image.js для каждого изображения, которое вы хотите отобразить?Если да, то в чем выгода?

Я прочитал то, что смог найти в image.js, но я до сих пор не понимаю эту проблему.

Компонент image.js: https://github.com/gatsbyjs/gatsby-starter-default/blob/master/src/components/image.js

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

/*
 * This component is built using `gatsby-image` to automatically serve optimized
 * images with lazy loading and reduced file sizes. The image is loaded using a
 * `StaticQuery`, which allows us to load the image from directly within this
 * component, rather than having to pass the image data down from pages.
 *
 * For more information, see the docs:
 * - `gatsby-image`: https://gatsby.dev/gatsby-image
 * - `StaticQuery`: https://gatsby.dev/staticquery
 */

const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
export default Image

Answer 1

Здесь происходит несколько вещей.

Во-первых, это всего лишь пример компонента со статическим запросом.Он просто показывает пример запроса graphql для извлечения изображения и визуализации данных изображения.Вы, вероятно, вызовете это из родительского компонента.

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

Используя приведенный выше пример, вы не можете передатьпараметры.Я недавно пробовал, но интерполированная строка graphql не допускает входящие параметры, но для этого примера есть обходной путь, как показано в этой ссылке , опубликованной Уэсом Босом.Короче говоря, обходной путь заключается в том, чтобы использовать запрос graphql для возврата каждого изображения, а затем использовать что-то вроде map для выделения интересующего изображения.Используя этот обходной путь, мне удалось создать обобщенную версию примера в вашем посте, в котором я передаю имя интересующего изображения.Хотя, очевидно, не идеально, если у вас есть сотни изображений на вашем сайте.

Вы можете передавать параметры в запросы graphql для «компонента страницы».Учебное пособие по Gatbsy (https://www.gatsbyjs.org/tutorial/) отлично, я не могу не подчеркнуть, насколько целесообразно было бы пройти весь этот учебник. В частях четвертой и пятой рассказывается о graphql и работе с запросами и изображениями.

При работе с изображениями предлагается использовать gatsby-image (https://www.gatsbyjs.org/packages/gatsby-image/),, который используется в примере.

Я также создал еще один общий компонент изображения, который принимает данные изображения, а неимя изображения, как опора. В компоненте родительской страницы я могу определить постоянный запрос graphql и затем передать результаты этого в мой компонент изображения. Этот подход может быть расширен до компонента страницы, который является галереей изображений. Например, запросможет возвращать все изображения в папке или соответствовать reg-ex. Запросы запросов могут быть повторены для создания компонента изображения для каждого изображения путем передачи данных изображения.

Я специально не включил примеры кодапоскольку ссылки содержат примеры всего, что я описал выше.