我在整个 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 解决了这个问题!
最佳答案
您的图片源应该没有../../
。图像路径在输出文件夹中是相对的。只需更改为:
<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
}
],
关于Angular - 动态加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49750360/