4

这是现有任何其他 Javascript 框架中单个图像的代码：

<img src="images/someFile.png" />

...可能带有一些样式。

这是 Gatsby 中单个图像的代码（基本上是从 Gatsby Image 文档页面复制的，https://www.gatsbyjs.org/docs/gatsby-image/ ...这只是一个简单的示例）：

import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
export default function Image() {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "images/someFile.png" }) {
        childImageSharp {
          fixed {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)
  return (
      <Img fixed={data.file.childImageSharp.fixed} />
  )
}

天哪，我应该为我网站中的每张图片编写所有代码（好吧，我不必重复导入，但仍然如此）？！？

这不可能是正确的，所以很明显我不明白一些事情。有人可以澄清一下我对盖茨比的了解吗？

如果真的需要这么多代码才能将一张图片添加到网站，那么 Gatsby 肯定是有史以来开发速度最慢的框架（但从它的流行度来看，我不敢相信这是真的）。还是大多数 Gatsby 网站只使用很少的图片？

4

3 回答 3

1

在您提到的页面的开头有一些解释

gatsby-image 是一个 React 组件，旨在与 Gatsby 由 GraphQL 和 gatsby-plugin-sharp 提供支持的本机图像处理功能无缝协作，以轻松、完全地优化您网站的图像加载。

gatsby-plugin-sharp 可以压缩 jpeg/png 图像

天哪，我应该为我网站中的每张图片编写所有代码（好吧，我不必重复导入，但仍然如此）？！？

我认为您可以提取一些东西作为参数eq: "images/someFile.png"，并使其可重用

例子

import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
export default function Image({source}) {
  const { file: {childImageSharp: {fixed} } } = graphql(`
    query($source: String!) {
      file(relativePath: { eq: $source }) {
        childImageSharp {
          fixed {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `, {source})
  return <Img fixed={fixed} />
}
于 2020-06-24T19:45:08.330 回答
1

请参阅将资产直接导入文件和使用静态文件夹

import React from "react"
import importedImage from "../images/gatsby-icon.png"

const IndexPage = () => (
  <>
    <img src={importedImage} alt="Description of my imported image" />
    <img
      src="staticfolderimage.jpeg"
      alt="Description of my image in the ./static folder"
    />
  </>
)

export default IndexPage
于 2020-06-25T08:16:55.923 回答
1

这是一个很好的话题来讨论和分享。使用<img>标签（直接在组件中导入资产）或<Img>来自 Gatsby 的 React 组件始终取决于您，添加和扩展它所具有的所有支持。来自盖茨比图像文档：

gatsby-image是一个专门设计用于与 Gatsby 的 GraphQL 查询无缝协作的 React 组件。它将Gatsby 的原生图像处理功能与先进的图像加载技术相结合，可以轻松、完全地优化您网站的图像加载。 gatsby-image使用gatsby-plugin-sharp为其图像转换提供动力。

注意： gatsby- image不是<img />. 它针对固定宽度/高度的图像和拉伸容器全宽的图像进行了优化。您可以使用的某些方法<img />不适用于 gatsby-image。

因此，在不详细介绍使用 Gatsby 的所有好处<Img>（压缩、延迟加载、流体大小等）的情况下，如果您考虑一些细节，那么对每个图像都实施起来并不难。

Gatsby 是一个基于 CMS/数据源的框架，因此默认情况下，所有数据都来自 CMS 或外包的某个地方，这意味着它必须通过 GraphQL 进行查询。在这些查询中，理想情况下，您将准备数据，包括图像。这将避免您使用staticQuery您展示的内容。例如，设置文件系统后检索所有图像应如下所示：

{
  allImageSharp {
    edges {
      node {
        fluid(maxWidth: 800) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
}

注意：这是一个示例查询，其想法是从图像中获取并收集所需的所有数据以将其传递给<Img>组件

然后，在您的组件中，您只需要：

//...other imports
import Img from "gatsby-image"

const yourComponent= ({ data }) => {

  return <Layout>
    {data.edges.map(({ node })=> <Img fluid={node.childImageSharp.fluid} />)}
  </Layout>;
};

Gatsby 的使用示例<Img>可能不是最准确的用例，因为它涉及staticQuery另一种导入数据的方式，这种方式并不像看起来那样常见。您可以通过使用标准的 GraphQL 查询轻松避免它，从而节省大量代码行。

我想说的是，如果您正确设置数据，使用 Gatsby 的图像几乎就像使用普通的 HTML<img>标记一样。

您展示的示例代码（来自 Gatsby 的文档）将始终显示宇航员图像，但当然，使用单个<Img>组件并删除<Image>它或根据需要重新使用它完全取决于您。

于 2020-06-24T20:26:40.740 回答