我应该如何在 angular 自定义元素（Web 组件）中引用资产

Question

我创建了一个 Web 组件，并在其中引用了我的资产文件夹中的图像

如下

 <img src="./assets/bot.png" alt="{{botTitle}}" />

在本地一切正常，我将我的自定义元素发布到 firebase 主机并且 javascript、css 和资产文件夹已经存在于我的主机上。

然后我尝试在另一个 html peage 中使用我的网络组件，如下所示

<!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 中发布的网站上。

我知道我可以通过完整的 url 来推荐他们，但我也认为有一个明显的解决方案，但我错过了。

感谢帮助

Answer 1

<img [src]="getBotImage(request)" alt="{{botTitle}}" />

并在您的 ts 文件中创建从 Firebase 导入图像的函数

getBotImage(request: TypeOfRequestHere) {
    // function body
}

Answer 2

一种选择是将图像作为数据而不是 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% 独立的组件，而不是依赖于两个或更多文件。

这确实会增加您的 HTML 文件的大小，但如果您的图像都相当小，那么这应该没什么大不了的。

Answer 3

您还可以将 @Input() 来源添加到您的 angular 元素并使用它来构建您的所有网址。

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>

Angular 元素：

@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; }
}

Answer 4

我设置了 --base-href 和 --deploy-url，所以我的资产以自定义 url 为前缀（在我的例子中，它与部署 main.js 的地方相同）

我应该如何在 angular 自定义元素（Web 组件）中引用资产

How should I reference assets in angular custom element (Web Components)

javascript

web-component

custom-element

angular