search

dadoagency / contentful-gatsby-components

0 stars 0 forks source link

Advertorial 1 Logo does not currently support SVGs #2

Open martink-rsa opened 4 years ago

martink-rsa commented 4 years ago

This might extend passed Advertorial Type 1.

Details

One would be able to pass a SVG to the Advertorial. The SVG has to be imported instead of being queried. SVG is not handled with gatsby-image as it's vector-based and can scale indefinately and gatsby-image does not support SVG in queries. More details here: https://github.com/gatsbyjs/gatsby/issues/10297

Issue

Passing an SVG will lead to a crash as GraphQL query properties are being used on the image in the <img> tag. These properties would not exist for an SVG. image

The component cannot handle null values either, so the following will also lead to a crash:

<AdvertorialType1 logo={{src: Logo}}>

Fix

I haven't spent much time with the <Img> component, so the following might not be a good suggestion, however: I believe the best way to be handling this is to only pass the image sources to the <Img> component and to do the destructuring before the initial logo prpo is passed so that only the source ends up being passed.

This will then allow the <Img> component to always render the image being passed to it.

Jamie has devised a clever way to handle image GraphQL queries so maybe this would need to be a utility function that deals with images outside of the <Img> component? 

So my idea was to specify fluid or fixed in the query and just pass the query result to the Image component and let it decide which one to use without having to destructure the query result and pass specific props to the Image
martink-rsa commented 4 years ago

Here is a solid way of handling it I think:

https://github.com/gatsbyjs/gatsby/issues/10297

image

We can then just render out a normal img tag or the Gatsby <Img> component based on the extension