角度 – 动态加载图像

发布时间：2020-12-17 17:30:05 所属栏目：安全来源：网络整理

导读：我在StackOverflow上搜索过但我找不到解决问题的方法. F.Y.I我正在使用ASP.net Core 2.0的默认角度项目我正在构建一个Angular应用程序,我正在尝试根据其他地方找到的配置加载客户的徽标. 我正在尝试将此文件加载到我的home.component.html中我创建了一个“

我在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()方法应该如下所示

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!