在前端 将base64 字节数组转换为url显示图片

在前端将 Base64 编码的字节数组转换为 URL 显示的图片，可以通过以下步骤实现：

1. 将 Base64 编码的字节数组转换为字符串。

2. 将字符串拼接为 data URI。

3. 将 data URI 赋值给 img 标签的 src 属性，从而显示图片。

下面是 JavaScript 代码示例：

// 将 Base64 编码的字节数组转换为 URL 显示的图片
function base64ToImageUrl(imageBytes) {
  // 将字节数组转换为字符串
  const imageString = btoa(String.fromCharCode.apply(null, imageBytes));

  // 将字符串拼接为 data URI
  const imageUrl = `data:image/png;base64,${imageString}`;

  // 将 data URI 赋值给 img 标签的 src 属性
  const img = document.createElement('img');
  img.src = imageUrl;
  document.body.appendChild(img);
}

其中，`imageBytes` 为 Base64 编码的字节数组。调用 `base64ToImageUrl(imageBytes)` 函数即可将图片显示在页面中。

相关问题

vue:将后端返回文件流( type: "application/force-down" )转换为base64图片展示

在Vue.js中，当从后端获取到文件流（例如类型为"application/octet-stream" 或 "application/force-download" 的内容），通常需要将其转化为Base64格式以便于前端直接显示为图片。这里是一个步骤：

1. 首先，在后端处理文件流时，如果支持，可以将其转换成字节数组或者Base64字符串。

2. 在发送响应时，你可以选择返回Base64编码的图片数据，而不是原始文件流。例如，如果你的后端是Node.js，可以使用`fs`模块读取文件并转码：

const fs = require('fs');
// 读取文件并转为Buffer
const fileContent = fs.readFileSync(pathToYourFile);
const base64Data = Buffer.from(fileContent).toString('base64');
res.type('image/jpeg'); // 根据实际文件类型设置 Content-Type
res.send(base64Data);

3. Vue.js前端接收到这个Base64编码的数据后，可以这样显示：

axios.get('/api/file', { responseType: 'arraybuffer' })
  .then(response => {
    const binaryData = new Uint8Array(response.data);
    const blob = new Blob([binaryData], {type: 'image/jpeg'});
    const imageUrl = URL.createObjectURL(blob);
    // 使用v-bind绑定img标签src属性
    <img :src="imageUrl" alt="Your Image Description">
  })
  .catch(error => console.error(error));