如何在 Angular 元素中使用图像答案

【问题标题】：How can images be used in an Angular Element如何在 Angular 元素中使用图像
【发布时间】：2019-07-09 13:36:50
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

【解决方案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"

或使用在线转换器：

【讨论】：