如何在角度自定义元素(Web组件)中引用资产 [英] How should I reference assets in angular custom element (Web Components)
问题描述
我已经创建了一个Web组件，并且从那里的资产文件夹中引用了图像
I have created a web component and I referenced image from my asset folder in there
如下
<img src="./assets/bot.png" alt="{{botTitle}}" />
在本地一切都很好，我将自定义元素发布到了Firebase主机，并且主机上已经存在javascript，css和asset文件夹.
on local everything is fine, I published my custom element to firebase host and javascript, css and asset folder already exist on my host.
然后我尝试在下面的另一个html peage中使用我的Web组件
then I tried to use my web component in another html peage as below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TMIBot</title>
<base href="/">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no">
<title>Test Angular Elements</title>
<link rel="stylesheet" href="https://myproject.firebaseapp.com/dist/dlx-styles-1.0.css">
</head>
<body>
<dlx-chat></dlx-chat>
<script type="text/javascript" src="https://myproject.firebaseapp.com/dist/dlx-chatbot-1.0.js"></script>
</body>
</html>
并通过本地http服务器(http服务器)提供服务
and served this via a local http server (http-server)
问题是图像是从托管网站中不存在的 ./assets/bot.png 中加载的，并且它们存在于我在firebase中发布的网站中.
The problem is images are loading from ./assets/bot.png which doesn't exist in in the hosted website, and they exists on my published website in firebase.
我知道我可以通过完整的网址来引用它们，但是我也认为有一个明显的解决方案，但我错过了.
I know that I can refer them by a full url, but also I think there is a obvious solution and I missed.
感谢您的帮助
推荐答案
一种选择是将图像作为数据而不是链接嵌入:
One option would be to embed the image as data instead of a link:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
AAAAAElFTkSuQmCC" alt="beastie.png" scale="0">这将创建一个100％自包含的组件，而不是依赖于两个或多个文件.
This will create a component that is 100% self contained instead of relying on two, or more, files.
这确实会增加HTML文件的大小，但是如果图像都非常小，那就没关系了.
This does increase the size of your HTML file, but if your images are all fairly small then it shouldn't matter much.
这篇关于如何在角度自定义元素(Web组件)中引用资产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
