Angular - 动态加载图像

Question

我在整个 StackOverflow 上进行了搜索，但未能找到解决问题的方法。

---

F.Y.I 我正在使用 ASP.net Core 2.0 的默认 Angular 项目

我目前正在构建一个 Angular 应用程序，我试图根据在别处找到的配置加载客户的 Logo 。

我正在尝试将此文件加载到我的 home.component.html

我创建了一个“CustomerService”，它有一个函数 getLogo()，它本身返回客户 Logo 的路径。

我的文件夹结构如下: FOLDER STRUCTURE IMAGE
assets 文件夹保存图像，下面找到的 HTML 位于 home.component.html

我知道 "../../" 不是要走的路，所以我的第一个问题是如何解决这个问题。

我创建了以下 HTML 结构:

<img src="../../assets/timeblockr-logo.png" />
<img [src]="customerservice.getLogo()" />

CustomerService 的 getLogo 函数返回以下内容:

getLogo() {
    return "../../assets/timeblockr-logo.png";
}

---

** 编辑:找到解决方案!!! **

原来我不得不使用:

getLogo(): string{
    return require("../assets/timeblockr-logo.png");
}

特别感谢@Niladri 解决了这个问题!

Answer 1

您的图片源应该没有../../。图像路径在输出文件夹中是相对的。只需更改为:

<img src="assets/timeblockr-logo.png" />
<img [src]="customerservice.getLogo()" />

你的功能应该是:

getLogo(): string {
    return "assets/timeblockr-logo.png";
}

根据您的评论，您需要更改 .angular-cli.json 中的 "assets" 条目。强>到这个:

"assets": [
    "assets",
    "favicon.ico",
    { 
        "glob": "**/*", 
        "input": "./assets/images/", 
        "output": "./assets/images/", 
        "allowOutsideOutDir": false 
    }
],