I have images in a carousel:
<Image
src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props[organizationId].events[programId].imgId}_0.cover.jpg`}
className={styles.carouselImage}
layout="responsive"
width={865}
height={513}
key={`${props[organizationId].events[programId].imgId}`}
priority={true}
/>
I think all src are set well, as images are visible, rendered. Then what is the problem?
I see this in console:
has an invalid `imagesrcset` value
A bug has been filed with Safari which seems to be the only browser complaining.
I think you can safely ignore this error.
you should add this to your next.config.js file
module.exports = {
images: {
domains: ["amazonaws.com"],
},
}
from the docs :
To enable Image Optimization for images hosted on an external website, use an absolute url for the Image src and specify which domains are allowed to be optimized. This is needed to ensure that external urls can't be abused.
if its a local image you need to import it, and then use it
import dogImg from '../public/dog1.png'
<div>
<Image src={dogImg} />
</div>