从源代码显示 base64 图像 HTML答案

【问题标题】：Display base64 image HTML from source从源代码显示 base64 图像 HTML
【发布时间】：2019-06-11 17:53:37
【问题描述】：

是否可以从包含信息的文本文件中以 html 格式显示 base64 图像？
我知道的唯一方法是将整个内容粘贴到 html 中。

例如：

<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

也许我必须使用 JS？

【问题讨论】：

根据您的环境，可能有不同的技术可以做到这一点。那你还用什么？还是只是普通的html？
思路是动态插入图片？如果是这样，您可以使用 JS：进行 AJAX 调用（GET .txt 文件），然后使用文件内容动态插入图像。

标签： javascript html base64

【解决方案1】：

'use strict';

 const fs = require('fs');

 let buff = fs.readFileSync('test-image.png');  
 let base64data = buff.toString('base64');

 console.log('Image converted to base 64 is:\n\n' + base64data);

你用过 NodeJ 吗？如果你不知道你必须安装它。 (https://nodejs.org/it/) 您也可以将输出字符串放在标签 img 的属性 src 中的任何位置。

【讨论】：

您应该改用fs.readFile（在大多数情况下）。 This answer 简要解释了原因。