如何解决如何在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} />
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。