Jon*_*sen 6 resources custom-element angular angular-elements
我正在创建一个应该嵌入到多个外部站点上的角度元素。
嵌入过程将只是对已编译脚本和表示该元素的 DOM 元素的引用：
<html>
<head>
<script src="element.js"></script>
</head>
<body>
<element></element>
</body>
</html>
但问题是该元素使用了一些 .png、.svg、.gif 和 .jpg 格式的资源。
当然，在不同站点上使用的编译元素无法引用这些资源。
角度元素的文档非常有限，甚至 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
是的，这确实增加了组件的大小，但现在您的组件是独立的，并且更便于在其他应用程序中使用，而无需记住在新应用程序中也包含图像。
您可以在 *nix 机器上运行 Base64 命令：
base64 -i "myimage.jpg"
或者：
base64 -i "myimage.jpg" -o "base64.txt"
或者使用在线转换器：
链接于 2022 年 2 月 14 日验证
由于 SVG 文件是基于 XML 的，因此您可以将 SVG 文件直接嵌入到 HTML 中。您还可以将 SVG 数据嵌入到<img>标签中。
SVG 文件已经是文本，因此您不需要对它们进行 Base64 编码。但您确实需要对它们进行百分比编码。这会产生更小的数据块。
将 SVG 嵌入标签时，您应该从 SVG 数据顶部<img>删除。<?xml version="1.0"?>
这是执行百分比编码的简单例程：
const encodeSvg = str => str.replace(/\s+/g, ' ').replace(/["%#{}<>&|\[\]^`;?:@=]/g, key => encodeURI(key));
这是一个小的 SVG 文件：
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="12cm" height="12cm">
<g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
<circle cx="6cm" cy="2cm" r="100" style="fill:red;"
transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" style="fill:blue;"
transform="translate(70,150)" />
<circle cx="6cm" cy="2cm" r="100" style="fill:green;"
transform="translate(-70,150)"/>
</g>
</svg>
这是百分比编码时的样子：
<img src="data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212cm%22 height=%2212cm%22%3E %3Cg style=%22fill-opacity:0.7; stroke:black; stroke-width:0.1cm;%22%3E %3Ccircle cx=%226cm%22 cy=%222cm%22 r=%22100%22 style=%22fill:red;%22 transform=%22translate(0,50)%22 /%3E %3Ccircle cx=%226cm%22 cy=%222cm%22 r=%22100%22 style=%22fill:blue;%22 transform=%22translate(70,150)%22 /%3E %3Ccircle cx=%226cm%22 cy=%222cm%22 r=%22100%22 style=%22fill:green;%22 transform=%22translate(-70,150)%22/%3E %3C/g%3E %3C/svg%3E"/>
| 归档时间： |
|
| 查看次数： |
2362 次 |
| 最近记录： |