代码之家 › 专栏 › 技术社区 › Rick - HashtagNetwork

角度-动态加载图像

asp.net-core-2.0 typescript angular

6

Rick - HashtagNetwork · 技术社区 · 7 年前

我已经搜索了StackOverflow的所有地方,但还没有找到解决问题的方法。

F、我正在使用ASP。net Core 2.0的默认角度项目

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

我正在尝试将此文件加载到我家。组成部分html

我创建了一个“CustomerService”,它有一个函数getLogo(),该函数本身返回客户的徽标路径。

我的文件夹结构如下: FOLDER STRUCTURE IMAGE
这个资产文件夹保存图像,下面的HTML位于 家组成部分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为这个问题提供的解决方案!

3 回复 | 直到 7 年前

1

5

FAISAL 7 年前

您的图像源应该没有 ../../ 。图像路径在输出文件夹中是相对的。只需更改以下内容:

<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 
    }
],

2

Niladri 7 年前

Web包使用 url-loader 从扩展附带的角度项目加载图像 .png,.jpg 等查看以下代码 url加载器 github回购 https://github.com/webpack-contrib/url-loader

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

它查找具有上述扩展名的图像文件。但我们需要使用 require 对实际图像路径的语句,以便Web包了解图像的路径,以便它可以拾取图像。这在中是必需的 .ts /使用图像路径作为变量或从方法返回路径值时,键入脚本文件。第一个图像标记

<img src="../../assets/timeblockr-logo.png" /> 正在工作,因为Webpack使用 html-loader 对于 .html 文件,它会自动将图像标记上的src属性值替换为捆绑的图像URL。

所以你的 getLogo() 方法应如下所示

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

3

1

Tomasz Kula 7 年前

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

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

了解更多信息 Attribute Binding 。

角度-动态加载图像

我已经搜索了StackOverflow的所有地方,但还没有找到解决问题的方法。

F、 我正在使用ASP。net Core 2.0的默认角度项目

**编辑:找到解决方案**

F、我正在使用ASP。net Core 2.0的默认角度项目

编辑:找到解决方案