{images.map((img, index) => ( ))}

{images.map((img, index) => ( ))}

{images.map((img, index) => ( ))}

import React, { useEffect, useState } from "react";

const imageUrls = [
  "<https://~1~.jpeg>",
  "<https://~2~.jpeg>",
];

export default function CORSTest() {
  const [images, setImages] = useState<string[]>([]);

  const fetchImage = async (url: string) => {
    const res = await fetch(url);
    const imageBlob = await res.blob();
    const imageObjectURL = URL.createObjectURL(imageBlob);
    setImages(prevImages => [...prevImages, imageObjectURL]);
  };

  useEffect(() => {
    setImages([]);
    imageUrls.forEach(url => fetchImage(url));
  }, []);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingTop: '40px', color:'white' }}>
      {images.map((img, index) => (
        <img
          key={index}
          src={img}
          alt={`img-${index}`}
          width={400}
          style={{ marginBottom: '40px' }}
        />
      ))}
    </div>
  );
}