通过React JS中的URL将所有图像下载到客户端

import React from 'react';

const ImageDownloader = () => {
  const images = [
    '/path/to/image1.jpg',
    '/path/to/image2.jpg',
    '/path/to/image3.jpg',
    // ...
  ];

  const downloadImage = (imageUrl) => {
    const url = new URL(imageUrl, window.location.origin);

    // 发送GET请求下载图像
    fetch(url)
      .then(response => response.blob())
      .then(blob => {
        // 处理下载的图像，例如保存到本地
        // ...
      })
      .catch(error => {
        console.error('下载图像失败：', error);
      });
  };

  return (
    <div>
      {images.map((imageUrl, index) => (
        <div key={index}>
          <img src={imageUrl} alt={`Image ${index + 1}`} />
          <button onClick={() => downloadImage(imageUrl)}>下载图像</button>
        </div>
      ))}
    </div>
  );
};

export default ImageDownloader;