Promise.all未在React中加载图像以在HTML Canvas中使用

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error('Failed to load image'));
    image.src = url;
  });
}

const imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

Promise.all(imageUrls.map(url => loadImage(url)))
  .then(images => {
    // 所有图像加载成功，可以在这里使用images进行进一步处理
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    images.forEach(image => {
      context.drawImage(image, 0, 0);
    });
  })
  .catch(error => {
    // 图像加载失败，可以在这里处理错误
    console.error(error);
  });