Nodejs 图像未正确转换为 base64

Question

所以我正在读取一个文件，并将文件保存到一个变量中。 然后我使用该变量创建一个缓冲区并将其转换为 base64 字符串，以显示在<img>元素中。 但是当它生成时它看起来不像 base64 字符串，并且它不会显示在页面上。

我正在使用fflate读取 png 文件

    async readFile (name: string) {
        return new Promise((resolve) => {
            const file = this.getFile(name);
            if (!file) return resolve(null);
    
            const filedata: string[] = [];
            const decoder = new DecodeUTF8();
            file.ondata = (err, data, final) => {
                decoder.push(data, final);
            }
            decoder.ondata = (str, final) => {
                filedata.push(str);
                if (final) resolve(filedata.join(''));
            }
            file.start();
        })
    }

const avatar = await readFile('avatar.png');
const avatar_64 = Buffer.from(avatar).toString('base64');
console.log(avatar);
console.log(avatar_64)

<img alt="User Avatar" src={`data:image/png;charset=utf-8;base64,${avatar_64}`}/>

浏览器控制台

这是它应该看起来的样子吗？ 我已经尝试将字符集放入 img uri，但这似乎不起作用

Answer 1

我可以确认它适用于这个 png 文件：（ https://flatbay.fr/img/seloger.png ）

let avatar = require('fs').readFileSync('./seloger.png');
const avatar_64 = Buffer.from(avatar).toString('base64');
// console.log(avatar);
// console.log(avatar_64)
console.log('<img alt="User Avatar" src="data:image/png;charset=utf-8;base64,'+avatar_64+'"/>');

可以试试我的图吗？ 还是给我你的？ 或者也许你获得头像的方式是问题所在？

恕我直言，您使用 react 应该不是问题。 语法看起来有效。