5

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

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

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

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

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

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

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

4

1 回答 1

4

嵌入您的图像

创建完全独立的组件的最佳方法是使用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-02-14 验证

SVG 文件

由于 SVG 文件是基于 XML 的，您可以将 SVG 文件直接嵌入到 HTML 中。您还可以将 SVG 数据嵌入到<img>标签中。

SVG 文件已经是文本，因此您不需要对它们进行 Base64 编码。但是您确实需要对它们进行百分比编码。这会产生更小的数据块。

将 SVG 嵌入<img>标签时，您应该<?xml version="1.0"?>从 SVG 数据的顶部删除 。

这是执行百分比编码的简单例程：

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"/>
于 2019-02-15T15:50:03.113 回答