2

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

到目前为止，我已经尝试使用gatsby-source-s3（docs 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}调用图像的最佳方式是还是我做错了？这是最好的方法吗？有没有人看到其他方法来做到这一点？

4

1 回答 1

0

你是对的，你应该在构建时从 S3 中提取图像，并且为此使用社区插件——比如gatsby-source-s3——会让你的生活更轻松。

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

您可能想要的是将图像下载到本地节点（这由 Gatsby 的sourceNodesAPI 处理）以使用 sharp进行处理。

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

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

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

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

该gatsby-source-s3插件看起来未维护，因此您可能会遇到问题。

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

@robinmetral/gatsby-source-s3

有README大量文档，包括关于使用 sharp 处理图像的部分，您可能会发现它很有用。

于 2021-09-09T11:28:34.540 回答