Gatsby 似乎需要任何其他框架的 10 倍才能添加一个图像：我不明白什么？

Question

这是现有任何其他 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 一定是有史以来开发速度最慢的框架（但从它的流行程度来看，我不敢相信这是真的）。还是大多数 Gatsby 网站只使用很少的图像？

Answer 1

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

gatsby-image is a React component designed to work seamlessly with Gatsby’s native image processing capabilities powered by GraphQL and gatsby-plugin-sharp to easily and completely optimize image loading for your sites.

gatsby-plugin-sharp can compress jpeg/png images

Holy hell, I'm supposed to write all that code (ok, I don't have to repeat the imports, but still) for every image in my site?!?

我认为您可以提取一些东西作为参数，例如 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} />
}

Answer 2

这是一个讨论和分享的好话题。使用 <img> 标签始终取决于您（importing assets directly in the component) or <Img> React's Component from Gatsby, adding and extending all support it has. From Gatsby Image documentation:

gatsby-image is a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations.

Note: gatsby-image is not a drop-in replacement for <img />. It’s optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use <img /> won’t work with gatsby-image.

因此，无需详细说明使用 Gatsby <Img> 的所有好处（压缩、延迟加载、流体大小等），如果您考虑到每个图像，实现起来并不难说明一些细节。

Gatsby 是一个基于 CMS/data-sourced 的框架，因此默认情况下，所有数据都来自 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> 组件完全取决于您或者根据需要重复使用它。

Answer 3

见Importing Assets Directly Into Files and Using the Static Folder

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

Gatsby 似乎需要任何其他框架的 10 倍才能添加一个图像：我不明白什么？

Gatsby Would Seem to Require an 10x the Effort of Any Other Framework to Add One Image: What Am I Not Understanding?

javascript

gatsby

gatsby-image