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根本不存在)

我还想编辑本 map 片phone.png在开发过程中。

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

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

<小时/>

想法:如果有一个指令可以解决这个问题，那就太好了。

类似于 <img src="phone.png base64> **

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

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);
   };
}

希望能帮到你..