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

Question

I have an issue where a gallery from strapi upload folder loads totally fine in dev but as soon as its built i get the broken link icon. Even though the src is totally correct. In the console log i get 'ERR_CONNECTION_REFUSED' for all the images.

Code -

<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>

Query -

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

question from:https://stackoverflow.com/questions/65598234/gatsby-x-strapi-image-gallery-fine-in-dev-but-err-connection-refused-error-in

Answer 1

I think that your issue appears due to the changing port between gatsby develop (port 8000) and gatsby build (port 9000). Since the requesting port has changed it causes the ERR_CONNECTION_REFUSED because of the src of the <img> tag.

I would suggest using gatsby-image for handling and bypassing that type of issues. Your code should look like this:

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

Note: I'm assuming that you've set properly the filesystem (gatsby-source-filesystem) in order to allow Gatsby to parse and compile your images. If not, please configure it properly. Change the maxWidth and maxHeight as you wish.

Now, you can use:

 <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>

Managing images with gatsby-image allowing you to create local GraphQL nodes for the images, avoiding that connection issues.

If you haven't set your filesystem:

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