👀 Views: 74 💬 Answers: 1 📅 Created: 2025-06-14

next.js image react javascript

I've been banging my head against this for hours. After trying multiple solutions online, I still can't figure this out... I'm working on a project and hit a roadblock... I'm experiencing an issue with the Next.js Image component where images that are supposed to be lazy loaded do not display correctly when scrolling. I'm using Next.js version 13.0.0 with React 18, and my setup involves a grid of images that should load as they come into view. However, only the first few images load properly, while others remain blank until completely refreshed. Here’s the code for the image grid: ```jsx import Image from 'next/image'; import React from 'react'; const ImageGrid = ({ images }) => { return ( <div className="grid"> {images.map((img, index) => ( <div key={index} className="image-wrapper"> <Image src={img.src} alt={img.alt} width={300} height={200} loading="lazy" className="image" /> </div> ))} </div> ); }; export default ImageGrid; ``` I’ve tried adjusting the `loading` attribute, but it doesn’t seem to help. I also checked the console and am seeing a warning: `Warning: Image with src "..." is missing "width" and "height" properties.` which I believe is not the case since I've provided dimensions for each image. I’ve also ensured that the images are stored in a publicly accessible directory. Additionally, I’ve noticed that when I scroll to the images that don’t load, there’s a brief flicker where the image appears before disappearing again. This makes me suspect that there might be an issue with how the Intersection Observer is handling these elements. Has anyone encountered this issue and found a solution to ensure that all images load properly when they come into the viewport? Is there a better approach? Am I approaching this the right way? I'm developing on Ubuntu 22.04 with Javascript. Thanks, I really appreciate it!