我创建了一个 Web 组件，并从其中引用了我的资产文件夹中的图像
as below
<img src="./assets/bot.png" alt="{{botTitle}}" />
在本地一切都很好，我将自定义元素发布到 firebase 主机，并且 javascript、css 和 asset 文件夹已存在于我的主机上。
然后我尝试在另一个 html 页面中使用我的 Web 组件，如下所示
<!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-server) 提供服务
问题是图像正在加载./assets/bot.png它不存在于托管网站中，但它们存在于我在 firebase 中发布的网站上。
我知道我可以通过完整的网址来引用它们，但我也认为有一个明显的解决方案，但我错过了。
我很感激帮助
一种选择是将图像嵌入为数据而不是链接：
<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% 自包含的组件，而不是依赖于两个或更多文件。
这确实会增加 HTML 文件的大小，但如果您的图像都相当小，那么这应该不会有太大影响。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
