Gatsby + Contentful + Netlify - 如何在生产中渲染 tracedSVG 图像？

Question

我正在使用 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 查询从 Contentful 本地工作中检索 tracedSVG 图像。我的代码如下：

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 大小会减慢网站速度（100kB 的 jpg 图像大约是900kb（png）。

有没有人在生产中遇到过关于 tracedSVG 使用 jpg 图像渲染的相同问题？如果是这种情况，您是如何解决以阻止反复发生的崩溃的？谢谢。

Answer 1

我 post 回答这个问题已经一个月了，所以我认为我应该 post 我的非解决方案，但更像是一种变通方法，以防有人遇到同样的问题。看来 GatsbyContentfulFluid_tracedSVG 实际上在生产中被破坏了，这个错误至今仍未解决。

我只是决定恢复使用 fluid 解决方案而不是 tracedSVG，因为它在开发和生产环境中都有效，因此图像为

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

并查询为

node {
  image {
    fluid {
      ...GatsbyContentfulFluid
    }
  }
}

Answer 2

我还有一个发现可能是 "non-solution"。似乎当我在项目的终端中运行命令 gatsby clean 然后提交并推送一个新的更改或只是一个假的更改到 master，然后在 Netlify 上构建时，错误消失了。表明它与缓存相关。

Gatsby + Contentful + Netlify - 如何在生产中渲染 tracedSVG 图像？

Gatsby + Contentful + Netlify - how to render tracedSVG images in production?

fluid-images

contentful

gatsby

netlify

gatsby-image