Gatsby x Strapi - 图片库在开发中很好，但在构建中出现 ERR_CONNECTION_REFUSED 错误

Question

我有一个问题，来自 strapi 上传文件夹的画廊在开发中加载完全正常，但一旦它建立我就得到损坏的 link 图标。即使 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）之间的端口变化引起的。由于请求端口已更改，因此会导致 ERR_CONNECTION_REFUSED，因为 <img> 标记的 src。

我建议使用 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
  },
},

Gatsby x Strapi - 图片库在开发中很好，但在构建中出现 ERR_CONNECTION_REFUSED 错误

Gatsby x Strapi - image gallery fine in dev but ERR_CONNECTION_REFUSED error in build

graphql

strapi

gatsby