image - 如何在 Vue.js 应用程序的 img 标签中显示 blob 图像？

Question

我以以下格式将图像保存到数据库：

data:image/png;base64,iVBORw0KGgoAAAANSUhEU...

当我从数据库中获取该图像时，我在“响应”部分的“网络”选项卡中看到以下内容：

"planimetry": {
    "type": "Buffer",
    "data": [
      100,
      97,
      116,
      97,
      58,
      ...

在 Vue.js 模板中，我有：

<img
  :src="sectionData.planimetry"
/>

我作为道具获得的 sectionData 是 BLOB 的类型。

问题是未显示图像，即：src="[object Object]。

如何显示图像？

标签： imagevuejs2blob

Answer 1

数字 100、97、116、97、58 只是data:ASCII 格式。这表明该数组只是原始图像格式的字节。

您可以使用以下方式恢复原始格式：

planimetry.data.map(b => String.fromCharCode(b)).join('')

这应该足以将其src用作<img>.

如果可能的话，我希望这将在服务器上而不是在 UI 中修复。如果它返回图像的原始字节，那么就足够公平了，但data:image/png;base64实际上应该只是作为字符串传输。