角度-动态加载图像

Question

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

---

仅供参考，我正在使用ASP.net Core 2.0的默认角度项目

我目前正在构建一个Angular应用程序，试图根据其他位置的配置加载客户的徽标。

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

我创建了一个“ CustomerService”，其中包含一个函数getLogo（），该函数本身返回客户徽标的路径。

我的文件夹结构如下： 文件夹结构图像
的资产文件夹包含的图像，和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";
}

根据您的意见，您需要将您的"assets"条目更改.angular-cli.json为：

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

Answer 2

Webpack 用于url-loader从带有扩展名.png,.jpg等的 Angular 项目加载图像。看一下url-loadergithub 仓库中的以下代码https://github.com/webpack-contrib/url-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

它会查找具有上述扩展名的图像文件。但是我们需要使用require实际图像路径的语句来让 Webpack 了解图像的路径，以便它可以拾取它们。.ts当使用图像的路径作为变量或从方法返回路径值时，这在 /typescript 文件中是必需的。第一个图像标签

<img src="../../assets/timeblockr-logo.png" />之所以有效，是因为 Webpack 用于html-loader文件.html，它会自动将图像标签上的 src 属性值替换为捆绑的图像 URL。

所以你的getLogo()方法应该像下面这样

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