我创建了一个 Web 组件，并从其中引用了我的资产文件夹中的图像
如下
<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我知道我可以通过完整的网址来引用他们，但我也认为有一个明显的解决方案，但我错过了。
我很感激帮助
一种选择是将图像嵌入为数据而不是链接：
<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 文件的大小，但如果您的图像都相当小，那么这应该没什么影响。
您还可以将 @Input() 原点添加到您的角度元素并使用它来构建所有网址。
HTML：
<dlx-chat origin="https://myproject.firebaseapp.com/dist"></dlx-chat>
<script type="text/javascript" src="https://myproject.firebaseapp.com/dist/dlx-chatbot-1.0.js"></script>
角度元素：
@Component({
selector: 'dlx-chat',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
@Input() origin = '';
constructor(private storeService: StoreService) {}
ngOnInit(): void {
this.storeService.origin = this.origin;
}
}
@Injectable({ providedIn: 'root'})
export class StoreService {
public origin = '';
constructor() {}
}
@Component({
selector: 'app-foo',
template: `<img [src]="imgOri() + '/assets/images/PATH_TO_MY_IMAGE.jpg'">`,
styleUrls: ['./foo.component.scss']
})
export class FooComponent {
constructor(private storeService: StoreService){}
imgOri(): string { return this.storeService.origin; }
}
<img [src]="getBotImage(request)" alt="{{botTitle}}" />
并在您的 ts 文件中创建从 Firebase 导入图像的函数
getBotImage(request: TypeOfRequestHere) {
// function body
}
在环境.ts:
assetPath: '/assets/'在环境.prod.ts中：
assetPath: 'your-project-directory/dist/your-app/assets/'在组件中：
[src]="environment.assetPath + 'img.png'我设置了
--base-href--deploy-url