让我的 Gatsby 装备从 S3 中提取图像的最佳方法是什么？答案

【问题标题】：What is the best way to make my Gatsby rig pull in images from S3?让我的 Gatsby 装备从 S3 中提取图像的最佳方法是什么？
【发布时间】：2020-06-09 12:59:40
【问题描述】：

我正在尝试将 ai2html 合并到 Gatsby 构建的存储库中。我很快意识到我不能简单地使用gatsby-image，因为我没有将所有东西都部署到一个地方：我的代码通过public/index.html 转到一个地方，我的图像位于AWS S3 中。我正在寻找一种通过 URL 将图像提取到我的src/index.js 的方法，最好采用分步教程的方式，因为我是 Gatsby 的新手。

到目前为止，我已经尝试使用gatsby-source-s3（文档here），但我不确定我是否在我的index.js 中正确设置了它（我已经安装了它并放置了相关信息在gatsby-config.js:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import "../styles/ai_styles.css"

export default () => {

const data = useStaticQuery(graphql`
  query IndexQuery {
    images: allS3Images {
      edges {
        node {
          Key
          Url
        }
      }
    }
  }
`)

return (

<div>

<div id="g-crime-box" className="ai2html ai2html-box-v5">
        <div id="g-mobile" className="g-artboard" style={{width: '280px', height: '2328.3424680476px'}} data-aspect-ratio="0.12" data-min-width="280" data-max-width="579">
          <Img fluid={data.images.node.Url} alt="alt desktop image" />

...

</div>

我的主要问题是，{data.images.node.Url} 是调用图像的最佳方式还是我做错了？这是最好的方法吗？有没有人看到其他方法来做到这一点？

【问题讨论】：

标签： reactjs amazon-s3 gatsby gatsby-image

【解决方案1】：

您应该在构建时从 S3 中提取图像是对的，并且为此使用社区插件（例如 gatsby-source-s3）将使您的生活更轻松。

不过，现在，您直接在源中使用 AWS 对象 URL，因此图像基本上会直接从您的存储桶下载，未经处理，由您的用户。

您可能想要的是将图像下载到本地节点（由 Gatsby 的 sourceNodes API 处理）到 process with sharp。

为此，您需要将 GraphQL 查询更改为在 S3 节点上使用 childImageSharp。 gatsby-source-s3 在 its README 上有一个这样的例子：

query IndexQuery {
  images: allS3Image {
    edges {
      node {
        file: localFile {
          image: childImageSharp {
            sizes(maxWidth: 400, maxHeight: 400) {
              ...GatsbyImageSharpSizes_withWebp_tracedSVG
            }
          }
        }
      }
    }
  }
}

最后但并非最不重要的......

（免责声明：我是下面提到的插件的作者。）

gatsby-source-s3 插件 looks unmaintained，因此您可能会遇到问题。

出于这个原因，我为我的 Gatsby 网站构建了另一个 S3 源插件，并在此处发布：

@robinmetral/gatsby-source-s3

README 有大量文档，包括关于processing images with sharp 的部分，您可能会觉得有用。

【讨论】：