I'm sourcing data from yaml files and one of the field is a path to a gif file:
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
I'm using gatsby-transformer-yaml which was recommended in the official docs and it works fine for jpg, png, but doesn't work for animated gifs.
Are there any other solutions I could use?
The problem is not gatsby-transformer-yaml but Gatsby-Image. Gatsby-Image can only handle file types png + jpg.
For gif you need to use another component like the good old img tag.
You need to dynamically handle different file types. You can use the solution from this answer for for gifs as well:
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
}
...
Add this to your image component:
// svg support
if (!childImageSharp && extension === 'gif') {
return <img src={publicURL} alt={alt} />
}