角度 - 动态加载图像

Question

我已经搜遍了StackOverflow，但我还没有找到解决问题的方法。

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

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

我试图将此文件加载到我的home.component.html

我创建了一个＆＃34; CustomerService＆＃34;它有一个函数getLogo（），它本身返回客户的标识路径。

我的文件夹结构如下： FOLDER STRUCTURE IMAGE
资产文件夹包含图片，下面的HTML可在 home.component.html

中找到

我知道＆＃34; ../../" 不是要走的路，所以我的第一个问题是我能怎样做解决这个问题。

我创建了以下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等的图像。请查看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-loader用于.html个文件，这会自动使用捆绑的图片网址替换图片代码上的src属性值。

因此，您的getLogo()方法应如下所示

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

Answer 3

更改<img [src]="customerservice.getLogo()" />

至<img [attr.src]="customerservice.getLogo()" />

详细了解Attribute Binding。