Gatsby 盖茨比图像：childImageSharp与imageSharp的区别
我使用盖茨比图像自动处理不同大小的图像。它工作得很好 然而，在盖茨比图像中，一个示例使用graphql中的Gatsby 盖茨比图像：childImageSharp与imageSharp的区别,gatsby,Gatsby,我使用盖茨比图像自动处理不同大小的图像。它工作得很好 然而，在盖茨比图像中，一个示例使用graphql中的imageSharp获得不同的图像大小，而另一个示例使用childImageSharp。我很好奇这两者有什么区别 我假设它与盖茨比变形金刚夏普或盖茨比插件夏普有关，但这些插件的文档也没有任何相关信息。好问题，夏普是一个了不起的工具，可以在任何JavaScript应用程序中做这么多。它本身也有大量的文档，我建议查看 First imageSharp可以以多种方式使用，尤其是在变换时。但这里有一
imageSharpchildImageSharp我假设它与盖茨比变形金刚夏普或盖茨比插件夏普有关，但这些插件的文档也没有任何相关信息。好问题，夏普是一个了不起的工具，可以在任何JavaScript应用程序中做这么多。它本身也有大量的文档，我建议查看 First imageSharp可以以多种方式使用，尤其是在变换时。但这里有一个简单的例子，就是在盖茨比宇宙中使用imageSharp。假设这是页面
文件夹中的index.js
，并且有主页的路径
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返回到标准href=链接的ImageURL。使用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
}
}
}
}
/**
*将内部绝对链接转换为相对链接。
*
*@param{string}string要在其上运行link replacemnt的HTML
*/
链接替换（字符串）{
//console.log（字符串）
const formatted=string.replace(
/（href=“https？：\/\/dev your image api\.pantheonsite\.io\/）/g，
`href=”/`
)
返回格式
}
render（）{
const post={…this.props.data.wordpressPost}
const headshot={…this.props.data.file.childImageSharp.resolutions}
常量{percentScrolled}={…this.state}
const contentFormatted=this.linkReplace（post.content）
返回(
（this.post=el）}>
)
}
}
Post.propTypes={
数据：PropTypes.object.isRequired，
}
导出默认帖子
export const postQuery=graphql`
查询currentPostQuery（$id:String！）{
wordpressPost（id:{eq:$id}）{
wordpress\u id
标题
内容
鼻涕虫
}
文件（relativePath:{eq:“your image headshot.jpg”}）{
childImageSharp{
分辨率（宽：300，高：300）{
…盖茨比
}
}
}
}
如果这对您有帮助，请告诉我，如果没有，我很乐意帮助您更详细地解释。由于夏普和盖茨比都是我非常热衷的科目，我在全职工作中几乎每天都与夏普打交道。很抱歉延迟回复&也许你现在对夏普有了更好的了解，但我想我会在这里继续
回到盖茨比1.0，当我回答这个问题时，2.0还没有发布。但是有几件事需要考虑1图像路径在哪里？图像是来自博客帖子的MD文件还是来自资产文件或API
这是使用盖茨比图像的组件的外观：（来自盖茨比v1文档）
从“React”导入React
从“盖茨比图像”导入Img
导出默认值（{data}）=>(
你好，盖茨比形象
)
export const query=graphql`
质疑{
文件（relativePath:{eq:“blog/avatars/kyle mathews.jpeg”}）{
childImageSharp{
#在查询中正确指定图像处理规范。
#使页面的设计更改时更新变得很简单。
固定（宽度：125，高度：125）{
…盖茨比
}
}
}
}
`
盖茨比映像直接使用库中的组件。如上所示，盖茨比图像使用childImageSharp引用GraphQL查询，在该查询中定义图像的文件路径、大小等。它将被视为子映像，因为文件系统中的原始映像或“原始”映像的大小或文件类型不同
当在组件或布局中定义节点或图像的一般意义时，可以使用ImageSharp，因为没有直接调用图像的特定路径 这个问题已经问了很久了，但我希望能直接回答“imageSharp和childImageSharp有什么不同？”
imageSharp
和childImageSharp
它们始终是相同类型的节点，即ImageSharp
。差异是参考点
在一个典型的盖茨比博客中，所有文件都将首先使用gatsby transformer文件系统
进行处理。每个文件将获得一个节点，其中包含诸如文件类型等信息，然后，一个类似于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`
无论何时发生这种情况，都会在原始文件
节点和ImageSharp
节点之间创建父子关系。子ImageSharp
节点可在名为childImageSharp
的文件
节点上查询
File ImageSharp
|--id: 1 |--id: 2
|--children |--parent
| `--[ id: 2 ] | `--id: 1
`--childImageSharp |--fluid
|--id: 2 ...
|--fluid
...
这意味着您可以通过至少两种方式查询相同的ImageSharp
节点：
1.从
File ImageSharp
|--id: 1 |--id: 2
|--children |--parent
| `--[ id: 2 ] | `--id: 1
`--childImageSharp |--fluid
|--id: 2 ...
|--fluid
...
query {
// relativePath is relative to the folder set in `gatsby-transformer-file-system`
file ( relativePath: { eq: "src/X"} ) {
childImageSharp {
id
fluid {
src
}
}
}
}
{
imageSharp (id: {eq: "2"}) { // not a real id
id
fluid {
src
}
}
}
// error
{
childImageSharp {
id
}
}