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}) {
    ...responsiveImageFragment
  }
}

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}) {
    ...responsiveImageFragment
  }
}

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 {
    srcSet
    webpSrcSet
    sizes
    src
    width
    height
    aspectRatio
    alt
    title
    base64
  }
`
  • And here is the code:
<Flex
    w="full"
    h="full"
    justify="center"
    alignItems="center"
    mt={{base: 20, lg: 0}}
>
    <Image data={cover.responsiveImage} />
</Flex>

@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 support@datocms.com 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):