Question

我正在使用 Gatbsy ，内容丰富 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 in png）。

是否有人在生产中使用tracedSVG用jpg图像进行渲染时遇到相同的问题，如果是这种情况，您如何解决以防止重复崩溃？谢谢。

Answer 1

距我发布问题已有一个月了，以为我应该发布我的非解决方案，但更像是一种解决方法，以防有人遇到相同的问题。看来GatsbyContentfulFluid_tracedSVG实际上在生产中已损坏，并且该错误至今尚未解决。

我只是决定恢复使用fluid解决方案而不是tracedSVG，因为它既可以在开发环境中使用，也可以在生产环境中使用，因此具有如下图像：

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

和查询为

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

Answer 2

我还有一个发现可能是“非解决方案”。似乎当我在项目的终端中运行命令gatsby clean并提交并将新的更改或只是伪造的更改推送到基于Netlify的主数据库中时，错误消失了。建议这与缓存有关。

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

2 个答案: