vue 前端base64转图片

Vue.js 中可以使用 JavaScript 的内置 `atob` 和 `Buffer` 或者第三方库如 `js-base64` 来将 Base64 编码的图片转换为真正的图片。以下是一个简单的示例：

// 使用原生方法
function base64ToImage(base64) {
  return new Promise((resolve, reject) => {
    const data = window.atob(base64);
    const mime = 'image/jpeg'; // 或者根据Base64编码推断图片类型
    const buffer = Buffer.from(data, 'binary');
    let blob = new Blob([buffer], { type: mime });
    
    if (window.URL.createObjectURL) {
      resolve(URL.createObjectURL(blob));
    } else {
      reject('Your browser does not support object URLs.');
    }
  });
}

// 示例用法
axios.get('/api/image', { responseType: 'blob' })
  .then(response => base64ToImage(response.data.toString()))
  .then(imgUrl => {
    // 将imgUrl赋值给HTML元素的src属性
    document.getElementById('my-image').src = imgUrl;
  })
  .catch(err => console.error(err));

这里假设你已经通过 Axios 获取到了 Base64 编码的图片数据。如果浏览器支持 `createObjectURL`，则可以直接创建 URL 对象表示图片，然后设置到 HTML 元素的 `src` 属性。