👀 Views: 1 💬 Answers: 1 📅 Created: 2025-06-11

next.js image-optimization react javascript

Quick question that's been bugging me - I'm currently working with an scenario with the Next.js Image component where it seems to be serving the wrong image sizes based on dynamic query parameters... I have a page that displays user-uploaded images, and depending on the selected size parameter in the URL (e.g., `/images?size=small`), I expect the Image component to use the appropriate source size. However, it continues to render the default size regardless of the query. I've tried using the `srcSet` prop to define different image sources, but it doesn't seem to have any effect. Here's my current setup: ```javascript // pages/images.js import Image from 'next/image'; const ImagesPage = ({ images }) => { const size = new URLSearchParams(window.location.search).get('size') || 'medium'; const imageSizeMap = { small: '300w', medium: '600w', large: '1200w', }; return ( <div> {images.map((img) => ( <Image key={img.id} src={img.url} alt={img.alt} width={imageSizeMap[size]} height={imageSizeMap[size]} sizes={`(max-width: 600px) ${imageSizeMap.small}, (max-width: 900px) ${imageSizeMap.medium}, ${imageSizeMap.large}`} /> ))} </div> ); }; export async function getServerSideProps() { const images = await fetchImagesFromDatabase(); // Assume this fetches images return { props: { images } }; } export default ImagesPage; ``` In the above code, `imageSizeMap` is supposed to dynamically set the width and height based on the selected size in the query. However, when I inspect the rendered images, they always seem to load the medium size, regardless of the query. The console also shows the warning: `Image with src "{img.url}" is missing "width" and "height"; it will not be optimized` even though I'm passing those props. I've confirmed that `img.url` is valid and accessible, but the resizing doesn't work as expected. Any insights on what might be going wrong here, or how to properly implement responsive images in this scenario? Thanks in advance for your help! I'm working on a API that needs to handle this. Thanks in advance!