Javascript 如何将作为字符串导入的png注入div标记？

我有一个png文件，我正在使用rollup将其转换为字符串（在客户端上），如下所示

{
  input: pkg.entry,
  plugins: [
    resolve(),
    commonjs(),
    string({
      include: '**/*.(html|css|png|svg)',
    }),
    resolve(),
  ],
  output: {
    name: pkg.name,
    file: pkg.umd,
    format: 'umd',
  },
}

当我运行它时，它会变成一个字符串，我试图使用

import logo from './logo.png';
...
console.log(logo);
this.logo = `data:image/png;base64, ${logo}`;
this.refresh();
...
const html = Mustache.render(template, this);
...
<img src="{{logo}}" alt="Red dot" />

---

"�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0001�\u0000\u0000\u0000�\b\u0006\u0000\u0000\u0000L\u001d/�\u0000\u0000\u0000\u0019tEXtSoftware\u0000Adobe ImageReadyq�锿��\u001a�Y�o�:O\u0007\u0000\u0010p\u0000]�-�}5.�T��L�o�我>���\u0006b\u000e\u0000\bx�\T��|���|�÷����\u0004���{��?;\u001eQ�\u001f��..."

看起来您的

数据

字符串的一部分只是二进制数据，而不是正确的

base64

编码字符串。也许可以尝试对其进行编码？我尝试使用btoa进行编码，但如果

字符超出范围

错误，则抛出错误。请尝试本文中提到的解决方案

console.log(logo);