Gatsby x Strapi - 开发中的图像库正常，但构建中的 ERR_CONNECTION_REFUSED 错误

Question

我有一个问题，strapi 上传文件夹中的画廊在 dev 中加载完全正常，但一旦构建，我就会得到损坏的链接图标。即使 src 是完全正确的。在控制台日志中，我得到所有图像的“ERR_CONNECTION_REFUSED”。

代码-

<div className="image-grid">
                {data.home.galleryImage.map((image, index, caption) => (
                      <div className="image-item" key={`${index}-cl`} class="imgcontt">
                       <img src={`http://167.99.84.214${image.url}`} alt="hh" class="galleryimg" thumbnail/>
                      </div>
                ))  
                }
                </div>

查询-

export const query = graphql`
  query GetSingleHome($slug: String) {
 galleryImage {
      url
      caption
    }
}
`

Answer 1

我认为您的问题是由于gatsby develop（端口8000）和gatsby build（端口9000）之间的端口更改而出现的。由于请求端口已更改，因此由于<img> 标签的src 而导致ERR_CONNECTION_REFUSED。

我建议使用gatsby-image 来处理和绕过此类问题。您的代码应如下所示：

export const query = graphql`
  query GetSingleHome($slug: String) {
    galleryImage { 
      formats {
        medium
          childImageSharp {
           fluid(maxWidth: 400, maxHeight: 250) {
             ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
`

注意：我假设您已正确设置文件系统 (gatsby-source-filesystem) 以允许 Gatsby 解析和编译您的图像。如果没有，请正确配置。随意更改maxWidth 和maxHeight。

现在，您可以使用：

 <div className="image-grid">
    {data.home.galleryImage.map((image, index, caption) => (
          <div className="image-item" key={`${index}-cl`} class="imgcontt">
           <Img fluid={image.formats.medium.childImageSharp.fluid} alt="hh" class="galleryimg" thumbnail/>
          </div>
    ))  
    }
    </div>

使用 gatsby-image 管理图像允许您为图像创建本地 GraphQL 节点，避免连接问题。

如果你还没有设置你的文件系统：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pages`,
    path: `${__dirname}/src/images/`, //path to your images
  },
},