通过编译应用程序将<img src="phone.png"> 转换为Base64 <img src="data:img/png;base64,....">，使应用程序立即加载图像

Question

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

---

我想通过编译应用程序（ng build 或 ng serve）将 <img src="..."> 转换为 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 完成，但我不知道如何。

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

希望能帮到你..