如何在gatsbyjs的yaml中包含GIF？

我从yaml文件中获取数据，其中一个字段是gif文件的路径：

  name: Refer A Medical Specialist
  summary: Machine learning web app that refers a medical specialist depending on user's symptoms
  tags: [React, Node.js, MySQL, Redis]
  image: images/diagnosis_app.gif

我使用的是《盖茨比变形金刚》中推荐的yaml，它可以很好地用于jpg、png，但不适用于动画GIF

---

还有其他解决方案吗？

问题不是

gatsby transformer yaml

，而是

gatsby Image

。盖茨比图像只能处理文件类型

png

+

jpg

对于gif，您需要使用另一个组件，如good old

img

标记

您需要动态处理不同的文件类型。您也可以使用for for gif：

图ql：

  ...
  image {
    childImageSharp {
      fluid(maxWidth: 500, quality: 92) {
        ...GatsbyImageSharpFluid
      }
    }
    extension // you might have to adapt this to your yaml data source
    publicURL // you might have to adapt this to your yaml data source
  }
  ...

将其添加到图像组件：

  // svg support
  if (!childImageSharp && extension === 'gif') {
    return <img src={publicURL} alt={alt} />
  }

//svg支持
如果（！childImageSharp&&extension==='gif'）{
返回
}

问题不在于

盖茨比变压器yaml

而是

盖茨比图像

。盖茨比图像只能处理文件类型

png

+

jpg

对于gif，您需要使用另一个组件，如good old

img

标记

您需要动态处理不同的文件类型。您也可以使用for for gif：

图ql：

  ...
  image {
    childImageSharp {
      fluid(maxWidth: 500, quality: 92) {
        ...GatsbyImageSharpFluid
      }
    }
    extension // you might have to adapt this to your yaml data source
    publicURL // you might have to adapt this to your yaml data source
  }
  ...

将其添加到图像组件：

  // svg support
  if (!childImageSharp && extension === 'gif') {
    return <img src={publicURL} alt={alt} />
  }

//svg支持
如果（！childImageSharp&&extension==='gif'）{
返回
}