gpt4 book ai didi

angular - 如何在 Angular 元素中使用图像

转载 作者:行者123 更新时间:2023-12-03 19:30:55 25 4
gpt4 key购买 nike

我正在创建一个 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"

或使用在线转换器:
  • https://www.base64-image.de/
  • https://ezgif.com/image-to-datauri
  • 关于angular - 如何在 Angular 元素中使用图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54708824/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com