gatsby-image: разница между childImageSharp и imageSharp

Question

Я использую gatsby-image для автоматической обработки изображений разных размеров. Отлично работает.

Однако в документах gatsby-image один пример использует imageSharp в graphql для получения разных размеров изображения, в то время как другой пример использует childImageSharp. Мне было любопытно, в чем разница между этими двумя?

Я предполагаю, что это связано либо с gatsby-transformer-sharp, либо с gatsby-plugin-sharp, но в документации по этим плагинам также нет никакой информации об этом.

Answer 1

Извините за задержку с ответом, и, может быть, у вас теперь есть лучшее понимание, но я решил, что буду следить за этим здесь.

Возвращаясь к Gatsby 1.0, когда я ответил на этот вопрос, 2.0 еще не был выпущен. Но несколько вещей должны быть приняты во внимание к учету 1, где путь изображения? и 2 - изображение, полученное из файла MD для записи в блоге, файла ресурсов или API?

Вот как выглядит компонент, использующий gatsby-image: (это из документации Gatsby v1)

import React from "react"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

Gatsby-image напрямую использует компоненты из библиотеки Sharp . Как вы видите выше, gatsby-image использует childImageSharp, ссылаясь на запрос GraphQL, где вы определяете путь к файлу, размер и т. Д. Изображения. Это будет считаться дочерним, потому что исходное или «исходное» изображение в файловой системе отличается по размеру или типу файла.

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

Answer 2

Прошло много времени с тех пор, как этот вопрос был задан, но я надеюсь дать прямой ответ на вопрос «в чем разница между imageSharp и childImageSharp»:

Различается между imageSharp & childImageSharp

Это всегда один и тот же тип узла, который ImageSharp. Разница является контрольной точкой.

В типичном блоге gatsby все файлы сначала обрабатываются с gatsby-transformer-file-system. Каждый файл получит узел с информацией, такой как тип файла, затем плагин, подобный gatsby-transformer-sharp, подберет узел с соответствующим типом / расширением, затем обработает его и создаст новый узел:

File                                image.png

                                        |

                                   create a node with
gatsby-transformer-file-system ->  "type": "File",
                                   "extension": "png"

                                        |

                                   whenever see a node 
                                   with a valid image extension,
gatsby-transformer-sharp       ->  create a node with
                                   "type": "ImageSharp"
                                   that contains info of images
                                   processed by `gatsby-plugin-sharp`

Всякий раз, когда это происходит, между исходным узлом File и узлом ImageSharp создается родительско-дочернее отношение. Дочерний узел ImageSharp будет запрашиваться на узле File с именем childImageSharp.

File                                ImageSharp
  |--id: 1                              |--id: 2
  |--children                           |--parent
  |     `--[ id: 2 ]                    |    `--id: 1
  `--childImageSharp                    |--fluid
        |--id: 2                       ...
        |--fluid
       ...

Это означает, что вы можете запросить один и тот же узел ImageSharp как минимум двумя способами:

1. Из файлового узла

ImageSharp узел не содержит никакой информации о его местонахождении в файловой системе, поэтому, если вы хотите получить изображение из папки src/X, вам нужно запросить его следующим образом:

query {
  // relativePath is relative to the folder set in `gatsby-transformer-file-system`
  file ( relativePath: { eq: "src/X"} ) {
    childImageSharp {
      id
      fluid {
        src
      }
    }
  }
}

2.Сразу получите ImageSharp

Возможно, каким-то образом вы знаете точный id узла ImageSharp. Вы можете получить его по:

{
  imageSharp (id: {eq: "2"}) { // not a real id
    id
    fluid {
      src
    }
  }
}

Вы также можете запросить несколько изображений из allFile или allImageSharp.

Это вернется с ошибкой:

// error
{
  childImageSharp {
    id
  }
}

Другие плагины также имеют такие же отношения. Вы также можете найти узел childMardownRemark типа File, который разрешается в узел MarkdownRemark.

Это не имеет ничего общего с gatsby-image - это просто другой способ разрешения для одного и того же узла.

Answer 3

Отличный вопрос, Sharp - удивительный инструмент, который может многое сделать с любым приложением JavaScript. Он также имеет обширную документацию, к которой я сам обратился. http://sharp.dimens.io/en/stable/

Первый imageSharp может использоваться различными способами, особенно с Transform. Но вот простой пример использования imageSharp во вселенной Гэтсби. Представьте, что это index.js на страницах folder и есть маршрут home

import { Home } from 'routes/Home/Home'

/* eslint no-undef: "off" */
export const pageQuery = graphql`
  query HomeQuery {
    image1Image: imageSharp(id: { regex: "/image1.png/" }) {
      sizes(quality: 100) {
        ...GatsbyImageSharpSizes_withWebp
      }
    }
    image2Image: imageSharp(id: { regex: "/image2.png/" }) {
      sizes(quality: 100) {
        ...GatsbyImageSharpSizes_withWebp
      }
    }
    image3Image: imageSharp(id: { regex: "/image3.png/" }) {
      sizes(quality: 100) {
        ...GatsbyImageSharpSizes_withWebp
      }
    }
}
`
export default Home

Тогда childImageSharp вы будете использовать это для определения стилей изображения в приложении, например, у вас есть папка с именем types, путь будет src/types/images.js, например, в этом файле вы определяете разрешение и размер изображение и наборы данных, связанные. Затем экспортируйте childImageSharp, так как вы планируете многократно использовать ребенка в разных частях вашего приложения.

// @flow

export type GatsbyImageResolutions = {
    resolutions: {
        base64?: string,
        height: number,
        src: string,
        srcSet: string,
        width: number,
    },
};

export type GatsbyImageSizes = {
    sizes: {
        aspectRatio: number,
        base64?: string,
        sizes: string,
        src: string,
        srcSet: string,
    },
};

export type Image = {
    childImageSharp: GatsbyImageResolutions | GatsbyImageSizes,
};

Теперь вот пример силы преобразования изображения. Этот пример возвращается с ImageURL через REST-api WordPress к стандартной ссылке href = ссылка. Хорошо изменяет размеры и изменяет изображение с помощью childIamgeSharp! Оба существуют в одном файле src/post/post.js

/**
     * Transform internal absolute link to relative.
     * 
     * @param {string} string The HTML to run link replacemnt on
     */
    linkReplace(string) {
        // console.log(string)
        const formatted = string.replace(
            /(href="https?:\/\/dev-your-image-api\.pantheonsite\.io\/)/g,
            `href="/`
        )

        return formatted
    }

    render() {
        const post = { ...this.props.data.wordpressPost }
        const headshot = { ...this.props.data.file.childImageSharp.resolutions }
        const { percentScrolled } = { ...this.state }
        const contentFormatted = this.linkReplace(post.content)

        return (
            <div ref={el => (this.post = el)}>
                <div className={styles.progressBarWrapper}>
                    <div
                        style={{ width: `${percentScrolled}%` }}
                        className={styles.progressBar}
                    />
                </div>

                <div className={styles.post}>
                    <h1
                        className={styles.title}
                        dangerouslySetInnerHTML={{ __html: post.title }}
                    />

                    <div
                        className={styles.content}
                        dangerouslySetInnerHTML={{ __html: contentFormatted }}
                    />

                    <Bio headshot={headshot} horizontal={true} />
                </div>
            </div>
        )
    }
}

Post.propTypes = {
    data: PropTypes.object.isRequired,
}

export default Post

export const postQuery = graphql`
    query currentPostQuery($id: String!) {
        wordpressPost(id: { eq: $id }) {
            wordpress_id
            title
            content
            slug
        }
        file(relativePath: { eq: "your-image-headshot.jpg" }) {
            childImageSharp {
                resolutions(width: 300, height: 300) {
                    ...GatsbyImageSharpResolutions
                }
            }
        }
    }

Дайте мне знать, если это поможет вам, если нет, я был бы рад помочь объяснить более подробно. Поскольку Шарп и Гэтсби - оба субъекты, я очень увлечен ими и почти каждый день имею дело с Шарпом на своей работе.