我正在创建一个 Angular 元素，它应该嵌入到多个外部站点上。
嵌入过程将只是对已编译脚本的引用和表示元素的 DOM 元素:
<html>
<head>
<script src="element.js"></script>
</head>
<body>
<element></element>
</body>
</html>
但问题是该元素使用了一些 .png、.svg、.gif 和 .jpg 格式的 Assets 。
当然，在不同站点上使用的编译元素不能引用这些资源。
Angular 元素的文档非常有限，甚至 Angular Docs 也没有对此进行任何说明。
实现这一目标的最佳方法是什么？我见过一些人将资源转换为数据并以这种方式呈现。
最佳答案
创建完全自包含组件的最佳方法是使用 DATA URI 将图像嵌入到组件中。
取而代之的是:
<img src="http://www.example.com/image.jpg"/>
您可以将图像文件编码为文本格式，如 Base64，然后在
src 中使用该文本数据。属性:<img src="data:image/png;base64,your-base-64-encoded-image-data" />
更多细节在这里:
https://www.thesitewizard.com/html-tutorial/embed-images-with-data-urls.shtml
这确实会增加组件的大小，但它是自包含的，并且可以移植到其他应用程序，而无需将图像作为单独的文件包含在内。
SVG 文件已经是文本，但它们是基于 XML 的，因此您只需要对文件进行 URL 编码，而不需要对文件进行 Base64 编码。这会产生小得多的数据块。
您可以在 *nix 机器上运行 Base64 命令:
base64 -i "myimage.jpg"
或者:
base64 -i "myimage.jpg" -o "base64.txt"
或使用在线转换器:
关于angular - 如何在 Angular 元素中使用图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54708824/