我在StackOverflow上搜索过但我找不到解决问题的方法.
F.Y.I我正在使用ASP.net Core 2.0的默认角度项目
我正在构建一个Angular应用程序,我正在尝试根据其他地方找到的配置加载客户的徽标.
我正在尝试将此文件加载到我的home.component.html中
我创建了一个“CustomerService”,它有一个函数getlogo(),它本身返回客户的徽标路径.
我的文件夹结构如下：
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解决这个问题！
解决方法
Webpack使用url-loader加载角度项目中的图像,扩展名为.png,.jpg等.在github
https://github.com/webpack-contrib/url-loader中查看url-loader repo中的以下代码
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,use: [
{
loader: 'url-loader',options: {
limit: 8192
}
}
]
}
]
}
}
它会查找具有上述扩展名的图像文件.但是我们需要对Webpack的实际图像路径使用require语句来理解图像的路径,以便它可以拾取它们.当使用图像的路径作为变量或从方法返回路径值时,这在.ts / typescript文件中是必需的.第一个图片标签
< img src =“../../ assets / timeblockr-logo.png”/>因为Webpack使用.html文件的html-loader,它会自动使用捆绑的图像URL替换图像标签上的src属性值.
getlogo():string { return require("../assets/timeblockr-logo.png"); }
