web-dev-qa-db-fra.com

gatsby-image: différence entre childImageSharp et imageSharp

J'utilise gatsby-image pour gérer automatiquement différentes tailles d'image. Ça marche très bien.

Cependant, dans docs de gatsby-image, un exemple utilise imageSharp dans graphql pour obtenir différentes tailles d'image, tandis qu'un autre utilise childImageSharp. J'étais curieux de savoir quelle est la différence entre les deux?

Je suppose que cela a à voir avec gatsby-transformer-sharp ou gatsby-plugin-sharp, mais la documentation de ces plugins ne contient aucune information à ce sujet non plus.

gatsby
7
Brandon

Cette question a été posée il y a longtemps, mais j'espère donner une réponse directe à la question "Quelle est la différence entre imageSharp et childImageSharp":

Différent entre imageSharp et childImageSharp

Ils sont toujours du même type de nœud, à savoir ImageSharp. La différence est le point de référence.

Dans un blog typique de gatsby, tous les fichiers seront d'abord traités avec gatsby-transformer-file-system. Chaque fichier recevra un noeud avec des informations telles que son type, puis un plugin tel que gatsby-transformer-sharp récupérera le noeud avec le type/extension approprié, puis le traitera plus avant et créera un nouveau noeud:

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`

Chaque fois que cela se produit, une relation parent-enfant est créée entre le noeud File d'origine et le noeud ImageSharp. Le noeud enfant ImageSharp pourra être interrogé sur le noeud File avec le nom childImageSharp.


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

Cela signifie que vous pouvez interroger le même noeud ImageSharp d'au moins deux manières:

1. À partir du nœud de fichier

Le noeud ImageSharp ne contient aucune information sur son emplacement dans le système de fichiers. Par conséquent, si vous souhaitez obtenir une image du dossier src/X, vous devez l'interroger de la manière suivante:

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

2. Obtenez directement la ImageSharp

Peut-être connaissez-vous exactement la id exacte du noeud ImageSharp. Vous pouvez l'obtenir par:

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

Vous pouvez également interroger plusieurs images à partir de allFile ou allImageSharp.

Cela retournera avec une erreur:

// error
{
  childImageSharp {
    id
  }
}

D'autres plugins partagent également le même type de relation. Vous pouvez également rechercher un noeud childMardownRemark sur le type File, qui se résout en un noeud MarkdownRemark.

Cela n'a rien à voir avec gatsby-image - c'est simplement une manière différente de résoudre le même nœud.

3
Derek Nguyen

Excellente question, Sharp est un outil incroyable et peut faire beaucoup avec n'importe quelle application JavaScript. Il propose également une documentation complète que je lui ai suggéré de consulter. http://sharp.dimens.io/fr/stable/

First imageSharp peut être utilisé de différentes manières, en particulier avec Transform. Mais voici un exemple simple d'utilisation juste de imageSharp dans l'univers Gatsby. Imaginez que ceci soit index.js dans les pages folder et qu'il existe un itinéraire de 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 vous l'utiliserez ensuite pour définir les styles d'image dans une application. Par exemple, vous avez un dossier appelé types le chemin est src/types/images.js. Par exemple, dans ce fichier, vous définissez la résolution et la taille de l'image et des jeux de données associés. Exportez ensuite childImageSharp lorsque vous prévoyez de réutiliser l'enfant encore et encore dans différentes parties de votre application.

// @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,
};

Voici maintenant un exemple du pouvoir de transformer une image. Cet exemple est renvoyé avec un ImageURL via le WordPress REST-api vers un lien href = standard vers un lien. Bien redimensionner et remodeler l'image avec childIamgeSharp! Les deux existants dans un fichier 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
                }
            }
        }
    }

Faites-moi savoir si cela vous aide. Dans le cas contraire, je serais heureux de vous expliquer plus en détail. Sharp et Gatsby étant des sujets qui me passionnent énormément et que je traite avec Sharp presque quotidiennement dans mon travail à plein temps.

3
nick

Désolé pour le retard dans la réponse et peut-être que vous avez une meilleure compréhension maintenant, mais je me suis dit que je ferais un suivi ici. 

En se référant à Gatsby 1.0, ma réponse à cette question 2.0 n’a pas encore été publiée. Mais il faut tenir compte de quelques éléments 1 Où se trouve le chemin de l'image? et 2 l'image provient-elle d'un fichier MD pour un article de blog, un fichier d'actif ou une API?

Voici à quoi ressemble un composant utilisant gatsby-image: (extrait de la documentation de 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 utilise directement des composants de la bibliothèque Sharp . Comme vous le voyez ci-dessus, gatsby-image utilise childImageSharp pour référencer la requête GraphQL dans laquelle vous définissez le chemin du fichier, la taille, etc. de l'image. Ce serait considéré comme un enfant parce que l'image d'origine ou "d'origine" dans le système de fichiers est d'une taille ou d'un type de fichier différent.

ImageSharp peut être utilisé lors de la définition du nœud ou du sens général de l'image dans un composant ou une présentation, car aucun chemin spécifique pour une image n'est appelé directement. 

1
nick