An empty string ("") was passed to the src attribute. #925
Description
Description
Hi there, if u try to set a state, and change image in a state, client log an error:
An empty string ("") was passed to the src attribute. This may cause the browser to download the whole page again over the network. To fix this, either do not render the element at all or pass null to src instead of an empty string.
Minimal Repr.
const findCover = images.find(img => img?.url === cover)
const [selectedImage, setSelectedImage] = useState(findCover || (images[0]));
<Zoom className="relative h-full w-full overflow-hidden">
<Image
className="object-contain"
src={selectedImage.url}
alt={selectedImage.alt}
fill
/>
</Zoom>
<button
className="absolute cursor-pointer right-2 top-1/2 transform -translate-y-1/2 bg-white/80 hover:bg-white text-gray-800 p-2 rounded-full shadow-md z-10 focus:outline-none"
onClick={(e) => {
e.stopPropagation(); // Evita di attivare lo zoom
const currentIndex = images.findIndex(img => img.url === selectedImage.url);
const nextIndex = (currentIndex + 1) % images.length;
setSelectedImage(images[nextIndex]);
}}
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M9 5l7 7-7 7"/>
</svg>
</button>