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

【问题标题】：How should I reference assets in angular custom element (Web Components)我应该如何在角度自定义元素（Web 组件）中引用资产
【发布时间】：2018-10-06 21:10:14
【问题描述】：

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

如下

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

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

然后我尝试在另一个 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 中发布的网站上。

我知道我可以通过完整的 url 引用它们，但我认为有一个明显的解决方案但我错过了。

感谢帮助

【问题讨论】：

标签： javascript angular web-component custom-element

【解决方案1】：

一种选择是将图像作为数据而不是链接嵌入：

<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 文件的大小，但如果您的图像都相当小，那么它应该没有太大关系。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

感谢您的回答，我有大约 10 张图片，并且我的 css 中也有图片，以及函数对绑定性能有负面影响

【解决方案3】：

您还可以将@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; }
}

【讨论】：

【解决方案4】：

我设置了 --base-href 和 --deploy-url，所以我的资产以自定义 url 为前缀（在我的情况下，它与部署 main.js 的位置相同）

【讨论】：