javascript - 如何将作为字符串导入的 png 注入 div 标签？

Question

我有一个 png 文件，我正在使用汇总变成这样的字符串（在客户端上）......

{
  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；base64，%EF%BF%BDPNG%0A%1A%0A%EF%BF%B... net::ERR_INVALID_URL

如何将 png 呈现为字符串？

这是字符串...

console.log(logo);

".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�e<\u0000\u0000\u001e�IDATx�o\�y���[\u001f�(��[��Y8M�$t\u000b\u0004A\r� #�Y\u0006��d\u0017�õ\u0017\"�\u0002R��H\u0001��# �4\u0005�\u0006��-4Q` 0����\u0017��\"\ u001e\u0015\rZ��H[�D����\u001d�+��|Ͻ����\u0001\u0006�e����y�y�5\u0006\u0000\u0000\u0000\ u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u00\nL u0000Z\u0019... \u000e\u0000\bx�\t��|���|�÷����\u0004���{��?;\u001eQ�\u001f��..."

标签： javascriptdompng