I am having the same problem. My code is almost exactly like the authors. However, I am only getting blurred on both mobile and desktop.
Hello @dthreatt
It seems like we’ve already solved this through email, let us know if you run into any other issues!
I did but now I actually realized I am not getting the lazy loading with the blurred images. If I choose true it just shows the blurred image and if its false it show the image after it loads. @m.finamor @mat_jack1
Hello @dthreatt
Can you send us the snippet of your request to dato and the data you are plugging into your image component, as well as a snippet of your image component?
Thank you!
imported
import React from "react";
import { Image } from "react-datocms";
query
query MyQuery {
site: _site {
favicon: faviconMetaTags {
...metaTagsFragment
}
}
blogpost {
seo: _seoMetaTags {
...metaTagsFragment
}
}
allBlogposts(orderBy: date_DESC, first: 9) {
title
slug
excerpt
date
category {
name
slug
}
featureimage {
responsiveImage(
imgixParams: {ar: "4:3", auto: format, fit: crop, w: 600, q: 30}
) {
...responsiveImageFragment
}
}
author {
name
title
image {
responsiveImage(imgixParams: {auto: format, fit: crop, w: 28, h: 28, sat: -100}) {
...responsiveImageFragment
}
}
}
}
}
fragment responsiveImageFragment on ResponsiveImage {
srcSet
webpSrcSet
sizes
src
width
height
aspectRatio
alt
title
base64
}
fragment metaTagsFragment on Tag {
attributes
content
tag
}
returns
responsiveImage: {
srcSet: 'https://www.datocms-assets.com/101203/1698098889-untitled-design.jpg?ar64=NDoy&auto=format&crop=focalpoint&dpr=0.25&fit=crop&fp-x=0.39&fp-y=0.34&q=60&w=1200 300w,https://www.datocms-assets.com/101203/1698098889-untitled-design.jpg?ar64=NDoy&auto=format&crop=focalpoint&dpr=0.5&fit=crop&fp-x=0.39&fp-y=0.34&q=60&w=1200 600w,https://www.datocms-assets.com/101203/1698098889-untitled-design.jpg?ar64=NDoy&auto=format&crop=focalpoint&dpr=0.75&fit=crop&fp-x=0.39&fp-y=0.34&q=60&w=1200 900w,https://www.datocms-assets.com/101203/1698098889-untitled-design.jpg?ar64=NDoy&auto=format&crop=focalpoint&fit=crop&fp-x=0.39&fp-y=0.34&q=60&w=1200 1200w,https://www.datocms-assets.com/101203/1698098889-untitled-design.jpg?ar64=NDoy&auto=format&crop=focalpoint&dpr=1.5&fit=crop&fp-x=0.39&fp-y=0.34&q=60&w=1200 1800w',
webpSrcSet: '',
sizes: '(max-width: 1200px) 100vw, 1200px',
src: 'https://www.datocms-assets.com/101203/1698098889-untitled-design.jpg?ar64=NDoy&auto=format&crop=focalpoint&fit=crop&fp-x=0.39&fp-y=0.34&q=60&w=1200',
width: 1200,
height: 600,
aspectRatio: 2,
alt: 'Factory Workers',
title: 'Factory Workers',
base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQ0LDhIQDRYWDhURDhUYFxoZGCITFhUaKysjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oFh07Oy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIAAwAGAMBIgACEQEDEQH/xAAXAAADAQAAAAAAAAAAAAAAAAAABAYD/8QAHxAAAgMAAAcAAAAAAAAAAAAAAQMAAgQFBhESITFR/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgH/xAAYEQADAQEAAAAAAAAAAAAAAAAAASECEv/aAAwDAQACEQMRAD8Ar05VzHdeuehIiydTfsQ4voYVHzFpQqYlq5hqphr3QkfuJu89SfcIcqD5P//Z'
}
and the code to display is
<Image
lazyLoad={false}
data={item.featureimage.responsiveImage}
className="image-4"
/>
using astro
"dependencies": {
"@astrojs/netlify": "^3.0.3",
"@astrojs/prefetch": "^0.4.1",
"@astrojs/react": "^3.0.3",
"@astrojs/sitemap": "^2.0.2",
"@types/react": "^18.2.31",
"@types/react-dom": "^18.2.14",
"astro": "^2.10.15",
"astro-icon": "^0.8.1",
"date-fns": "^2.30.0",
"react-datocms": "^4.1.3"
},
"devDependencies": {
"@astrojs/renderer-react": "^0.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}```if I put true it just shows the placeholder and never a picture @mat_jack1 @m.finamor
If I put false no placeholder of course…
Hey @dthreatt! I’m a new support agent at DatoCMS and I’ll be helping @mat_jack1 and @m.finamor debug this issue. I’m currently trying to reproduce this locally based on what you’ve said so far.
To help speed up the process, would you be able to provide a preview deployment showing the issue on a live URL? And/or could you please make a reproducible example repo for us?
If you can’t provide either right away, no problem, I’ll still keep looking into it and trying to reproduce it 
Sure I can do that… URL right now is here: Webflow logo
let me make a quick repo with just minimal code that you can play with thats public. this is a site I am building so its constantly changing.
give me a few mins. its running in ASTROJS
Thank you @dthreatt! I appreciate the URL. Don’t worry about the repo example… I was able to reproduce it in our Astro starter template too. Looking into it now!
dangggg ok I already made it
HAHAHAHA
1 Like
Looking into this a bit more, it seems like this might actually be the intended behavior for Astro? It only hydrates clientside JS (including React) if you explicitly tell it to: Framework Components 🚀 Astro Documentation
Can you try adding client:visible to your <Image/> components in your *.astro files and see if that helps, like (from your index.astro, line 121):
{posts.map((item) =>
<p>
<Image
lazyLoad={true}
data={item.featureimage.responsiveImage}
className="image-4"
client:visible
/>
</p>
)}
Give me a moment and I’ll see if I can fork your repo with the changes too, for a better demo…
2 Likes
You are a genius. that worked!!
2 Likes
You might want to add that to any astro documentation
Awesome!! Thanks for confirming that.
I’ll bring this up internally and see what the best solution is! If the Astro community prefers not having clientside JS by default, I don’t know that we want to encourage that practice by default. But I’ll flag it for the team to review. Thanks for catching this issue!