Gatsby + Contentful + Netlify - как рендерить изображения tracedSVG в продакшене?

Я создаю веб-сайт, используя Gatbsy, Contentful CMS и Netlify. Он отлично выглядит и работает локально, но у меня есть проблема в производстве изображений флюидов с использованием опции tracedSVG. Развертывание Netlify раньше работало время от времени, и когда я добавил больше изображений в проект, теперь постоянно возникают следующие ошибки (не всегда на одной странице):

10:53:45 AM: The GraphQL query from /opt/build/repo/src/pages/index.js failed.
10:53:45 AM: Errors:
10:53:45 AM:   VipsJpeg: Corrupt JPEG data: premature end of data segment
10:53:45 AM:   VipsJpeg: out of order read at line 544
10:53:45 AM:   GraphQL request:54:3
10:53:45 AM:   53 | fragment GatsbyContentfulFluid_tracedSVG on ContentfulFluid {
10:53:45 AM:   54 |   tracedSVG
10:53:45 AM:      |   ^
10:53:45 AM:   55 |   aspectRatio

или иногда

error
The GraphQL query from /opt/build/repo/src/pages/index.js failed.
Errors: Input file contains unsupported image format
  GraphQL request:40:3
| fragment GatsbyContentfulFluid_tracedSVG on ContentfulFluid {
|   tracedSVG
|   ^
|   aspectRatio

и в редких случаях

Errors:
  VipsJpeg: Empty input file

(последнее не имеет смысла, поскольку изображения присутствуют в Contentful и являются обязательным полем моей модели контента)

Как упоминалось ранее; запрос GraphQL, извлекающий изображения tracedSVG из Contentful, работает локально. Мой код выглядит следующим образом:

import React from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = ({ data: { allContentfulIndexPage }) => {
  const { myImage } = allContentfulIndexPage.edges[0].node

  return (
    <div>
      {...someIrrelevantCodeToTheQuestion}
      <Img fluid={myImage.fluid}/>
    </div>
  )
}

export default IndexPage

export const query = graphql`
  query IndexPageQuery {
    allContentfulIndexPage {
      edges {
        node {
          myImage {
            fluid {
              ...GatsbyContentfulFluid_tracedSVG
            }
          }
        }
      }
    }
  }
`

Используя GraphiQL, я обнаружил, что локально, используя tracedSVG вместо того ...GatsbyContentfulFluid_tracedSVGтакже работает локально, но точно так же вылетает в среде Production/Netlify. Я подумывал об использованииpng изображения вместо jpg поскольку ошибки указывают на то, что с самими файлами что-то не так, хотя они хорошо отображаются локально, но эквивалент в размере png замедлит работу сайта (изображение jpg размером 100 КБ примерно соответствует 900 КБ в png).

Кто-нибудь сталкивался с такой же проблемой относительно tracedSVGрендеринг с изображениями jpg в производстве, и если это так, как вы решили остановить повторяющиеся сбои? Спасибо.

Источник

2 ответа

Решение

Прошел месяц с тех пор, как я разместил этот вопрос, поэтому подумал, что должен опубликовать свое нерешение, но больше похоже на работу, если кто-то столкнется с той же проблемой. Кажется, чтоGatsbyContentfulFluid_tracedSVG фактически не работает в производственной среде, и на сегодняшний день ошибка не устранена.

Я просто решил вернуться к использованию fluid решение вместо tracedSVG поскольку он работает как в среде разработки, так и в производственной среде, поэтому изображения

<Img
  fluid={node.image.fluid} />

и запросы как

node {
  image {
    fluid {
      ...GatsbyContentfulFluid
    }
  }
}
Источник

У меня также есть открытие, которое может быть "нерешением". Кажется, когда я запускаю командуgatsby cleanв терминале проекта, а затем зафиксируйте и отправьте новое изменение или просто поддельное изменение в мастер, который затем создается на Netlify, ошибка исчезает. Предполагает, что это связано с кешем.

Источник
Другие вопросы по тегам