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 應該不是問題。 語法看起來有效。