我如何使用下一个图像组件

Question

I uploaded images on image kit, so i can use the image link in my project. I kep getting errors i dont know why. I followed the documentation thoroughly. Here is my next config file

module.exports = {
    images: {
        domain: ['ik.imagekit.io'],
    },
}

Here is a javascript file that i used to store the images, swhich is then mapped to another file

const vondutch = [
  {
    id: '0',
    name: 'Von dutch pink',
    category: 'Shirts',
    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",

    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",

    price: 30000,
    rating: 4.5,
    size: 10,
    
  },
  {
    id: '1',
    name: 'Von dutch blue',
    category: 'Shirts',
    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",

    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
    image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
    price: 15000,
    brand: 'Adidas',
    rating: 4.0,
    size: 10,
    }
]


export default vondutch;

Here is where the image from the file above is used in a next file

<div class="slides">
              <Image
                id="slide-1"
                class="imagesli"

                src={image}
              />
              <div>
                <Image src={image1} />
              </div>
              <div id="slide-2">
                <Image src={image2} />
              </div>
              <div id="slide-3">
                <Image src={image3} />
              </div>
              <div id="slide-4">
                <Image src={image4} />
              </div>
              <div id="slide-5">
                <Image src={image5} />
              </div>
            </div>

Answer 1

you may want to map your elements

get array of all URLS-s of images you want to set

var images = [url_1, url_2, url_3...]

and then you should just

<div class="slides">
  <Image
    id="slide-1"
    class="imagesli"
    src={image}
  />
  {images.map((url, index) => (
    <div key={index} id={`slide-${index+1}`} >
      <Image src={url} />
    </div>
))}
</div>