VUE中以base64组成的数组如何转成多个图片显示

在Vue.js中，如果你有一个包含base64编码图片数据的数组，你可以通过以下步骤将它们转换为多个独立的图片元素并显示出来：

1. 首先，你需要创建一个函数来处理每个Base64字符串，将其转换为Blob对象，然后生成File对象，这是HTML5支持的文件格式。

function base64ToImage(base64Str) {
  return Promise.resolve(atob(base64Str))
    .then(data => {
      const buffer = new Uint8Array(data.length);
      for (let i = 0; i < data.length; i++) {
        buffer[i] = data.charCodeAt(i);
      }
      return window.URL.createObjectURL(new Blob([buffer], { type: 'image/jpeg' }));
    });
}

2. 然后，在循环遍历你的Base64数组时，对每个元素应用这个函数，并设置其src属性为生成的URL，同时插入到DOM中。

async function displayImages(arrayOfBase64) {
  for (const base64 of arrayOfBase64) {
    const imgElement = document.createElement('img');
    imgElement.src = await base64ToImage(base64);
    // 可选，添加一些样式或其他属性
    imgElement.style.width = 'auto';
    imgElement.style.height = 'auto'; // 或者设置自适应高度
    // 将图片添加到某个容器内，比如`#image-container`
    document.getElementById('#image-container').appendChild(imgElement);
  }
}

// 使用时，传入你的Base64数组
displayImages(yourBase64Array);