如何在角元素中使用图像

Question

我正在创建一个应该嵌入多个外部站点的角度元素。

嵌入过程将仅仅是对已编译脚本和表示该元素的DOM元素的引用：

<html>
   <head>
      <script src="element.js"></script>
   </head> 
   <body>
      <element></element>
   </body>
</html>

但问题是该元素使用了.png，.svg，.gif和.jpg格式的一些资产。

当然，在不同站点上使用的编译元素不能引用那些资源。

角元素的文档非常有限，甚至Angular Docs都没有说明这一点。

实现这一目标的最佳方式是什么？我见过一些人将资源转换为数据并以此方式呈现。

Answer 1

创建完全自包含组件的最佳方法是使用DATA URI将图像嵌入到组件中。

而不是这个：

<img src="http://www.example.com/image.jpg"/>

您可以将图像文件编码为文本格式，如Base64，然后在src属性中使用该文本数据：

<img src="data:image/png;base64,your-base-64-encoded-image-data" />

这确实增加了组件的大小，但它是自包含的，并且可以移植到其他应用程序，而无需将图像作为单独的文件包含在内。

SVG文件已经是文本，但它们是基于XML的，因此您只需要对文件进行URL编码，而不是Base64对其进行编码。这会产生更小的数据块。

您可以在* nix机器上运行Base64命令：

base64 -i "myimage.jpg"

要么：

base64 -i "myimage.jpg" -o "base64.txt"

或使用在线转换器：