如何在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

我使用的是official docs中推荐的gatsby-transformer-yaml，它适用于jpg，png，但不适用于动画gif。

我还能使用其他解决方案吗？

解决方法

问题不是gatsby-transformer-yaml，而是Gatsby-Image。 Gatsby-Image只能处理文件类型png + jpg。

对于gif，您需要使用其他组件，例如旧的img标签。

您需要动态处理不同的文件类型。您也可以将solution from this answer用于gif：

GraphQL：

  ...
  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} />
  }