React-datocms <Image /> not showing on mobile browsers further then blurred version

Any, idea why image would not render on the mobile browsers? I tried Safari and Chrome on iphone, but it stuck to this:

I am using this GraphQL query:

image {
  responsiveImage(imgixParams: {fm: webp, w: 800}) {

And <Image /> component react-datocms like this:

<Image data={image.responsiveImage} />

On desktop, the image renders as expected. Here is the working URL if you wanna check.

I’m still fairly new to date but I think the problem is your query, using fm: webp will only return the webp versions of the image which aren’t supported by safari on desktop or phone.

Try something like

image {
  responsiveImage(imgixParams: {auto: format, w: 800}) {

That should return multiple formats, one of which will be compatible with safari.

Thanks, I will try that. The weird thing is I am using the same query on other website and those images are showing on mobile browser. Safari supports webp since version 14

I tried changing ImgIx params as you suggested, but I get the same result…

Can you give us your react-datocms version, the exact snippet of code that uses the component, and the responsiveImageFragment fragment?

@s.verna below requested data…

  • react-datocms version: react-datocms": "^3.0.11",

  • Here is the responsiveImageFragment fragment:

export const responsiveImageFragment = `
  fragment responsiveImageFragment on ResponsiveImage {
  • And here is the code:
    mt={{base: 20, lg: 0}}
    <Image data={cover.responsiveImage} />

@s.verna did you maybe look into this, we are still not figuring out this…

Hello @primoz.rome, you mentioned that you are getting this in one specific query for a website but not the other, using the same query and Component, but a different image, correct?

If so could you send us at the query for the image that is not working with this component on a mobile browser as well as the one that seems to be working? Thank you!

:+1: Have sent the email

1 Like

7 posts were split to a new topic: component not correctly lazy-loading with thumbnails

@dthreatt FYI, I split your topic into its own thread so we can better track it separately from this older issue (didn’t want to lose it):