我正在使用gatsby-image处理自动处理不同的图像大小。它很棒。
但是，在gatsby-image的docs中，一个示例使用graphql中的imageSharp来获取不同的图像大小，而另一个示例使用childImageSharp。我很好奇两者之间有什么区别？
我认为它与gatsby-transformer-sharp或gatsby-plugin-sharp有关，但这些插件的文档也没有任何信息。
答案 0 :(得分：8)
问这个问题已经有一段时间了，但我希望直接回答“ imageSharp和childImageSharp有什么区别”这个问题：
imageSharp和childImageSharp之间的区别它们始终是相同类型的节点，即ImageSharp。区别是参考点。
在典型的gatsby博客中，所有文件将首先使用gatsby-transformer-file-system处理。每个文件都会获得一个节点，其中包含诸如文件的类型等信息，然后，像gatsby-transformer-sharp这样的插件将选择具有相关类型/扩展名的节点，然后对其进行进一步处理并创建一个新节点：< / p>
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节点：
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
}
}
}
}
ImageSharp 也许您以某种方式知道ImageSharp节点的确切id。您可以通过以下方式获得它：
{
imageSharp (id: {eq: "2"}) { // not a real id
id
fluid {
src
}
}
}
您还可以从allFile或allImageSharp查询多张图像。
这将返回错误：
// error
{
childImageSharp {
id
}
}
其他插件也具有相同的关系。您还可以在childMardownRemark类型上找到一个File节点，该节点可以解析为MarkdownRemark节点。
它与gatsby-image没有任何关系，只是解析为同一节点的方式不同。
答案 1 :(得分：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,
};
现在是变换图像功能的一个示例。此示例通过WordPress REST-api返回了带有ImageURL的ImageURL，并返回到标准href = link的链接。调整大小并使用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
}
}
}
}
让我知道这是否对您有帮助，否则，我很乐意帮助您进行详细说明。因为夏普和盖茨比都是受教育的对象，所以我非常热衷，几乎每天都在我的全职工作中与夏普打交道。
答案 2 :(得分：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，因为没有直接调用图像的特定路径。