node.js - 通过编译应用程序转换为Base64 ，使应用程序立即加载图像

Question

这是一个独特的问题： 我不想使用浏览器 javascript 来解决这个问题，请继续阅读...

---

我想<img src="...">通过编译应用程序（ng build或ng serve）转换为 Base64 img 标签，以使图像立即加载 - 除了应用程序本身之外无需进一步下载，而且还可以在开发应用程序时使图像动态变化。

例如，这是一个组件 - home.component.html：

编译前的代码（注意 base64 指令，虽然它只是一个想法）：

<img src="assets/images/phone.png" base64>

编译后想要的代码：

<img src="data:image/png;base64,iVBORw0......rest-of-base-64-goes-here">

---

重要提示：这应该在用户不运行前端 javascript 操作或调用图像文件的情况下发生。（意味着，phone.png编译时文件甚至不存在）

我仍然想phone.png在开发时编辑本地图像。

我知道我可以手动将文件转换为 base64 并在我的组件中更新它，但这正是我不想做的——我希望它自动发生以节省时间。

这意味着图像将位于组件本身中，位于已编译的.js文件之一中，因此将与应用程序一起立即加载。

---

想法：有一个可以解决这个问题的指令会很好也很容易。

像<img src="phone.png base64>**这样的东西

我认为它可以通过某种方式使用 node/webpack 来完成，但我不知道如何。

标签： node.jsangularwebpackbase64angular-cli

Answer 1

你需要使用readAsDataUrl()

function getBase64(event) {
   let me = this;
   let file = event.target.files[0];
   let reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     //me.modelvalue = reader.result;
     console.log(reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}

希望能帮到你。。