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

Posted 2023-03-08

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

【英文标题】：Gatsby x Strapi - image gallery fine in dev but ERR_CONNECTION_REFUSED error in build

【发布时间】：2021-04-12 08:16:41

【问题描述】：

我有一个问题，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`  class="galleryimg" thumbnail/>
                      </div>
                ))  
                
                </div>

查询-

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

`

【问题讨论】：

你在使用 Docker 吗？

不，我应该是吗？

【参考方案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  class="galleryimg" thumbnail/>
          </div>
    ))  
    
    </div>

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

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

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

【讨论】：

感谢您的回复！我已经实现了上述但得到“错误无法在类型“StrapiHomesGalleryImage”上查询字段“childImageSharp”。我在某处读到这可能与galleryImage 中有多个图像的事实有关？

从 graphgiql 实现，它们可以通过 -galleryImage 格式 medium childImageSharp fluid ...GatsbyImageSharpFluid

引用

我应该如何调整上面的代码以使其脱离该查询？

我已经更新了答案。它只是一个嵌套对象，因此您需要访问子属性。 GraphQL 查询也是如此。

我是这么认为的，但它仍然会引发错误 - 194:11 错误无法在类型“StrapiHomesGalleryImageFormats”graphql/template-strings 上查询字段“childImageSharp”