Блог

У меня проблема, когда галерея из папки загрузки 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
    }
}
`
 

Я думаю, что ваша проблема возникает из-за изменения порта между gatsby develop (port 8000 ) и gatsby build (port 9000 ). Поскольку порт запроса изменился, это вызывает ERR_CONNECTION_REFUSED из-за src <img> тега.

Я бы предложил использовать gatsby-image для обработки и обхода проблем такого типа. Ваш код должен выглядеть следующим образом:

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

Примечание: я предполагаю, что вы правильно настроили filesystem ( 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
  },
},