将路径添加到图像 src 属性

Question

我想动态显示我的数据库中的图像，我想这样做：

      <div class="col-lg-3 item-menu" *ngFor="let laptop of laptops">
              <span class="helper"></span>

              <img src="../../content/Laptop/{{laptop.iconFileName}}" />
              <p class="name-menu">
                {{laptop.name}}
                {{image}}
              </p>

       </div>

我的 laptop.iconFileName 只是我的 src 路径的结尾，但这不起作用。我只能这样做：

<img src="{{laptop.iconFileName}}" />

或

<img [src]="laptop.iconFileName" />

但我之前无法添加到此文件夹。

Answer 1

您需要使用属性绑定（因此，您的第二个选项），并且由于您需要添加路径，只需使用常规的旧字符串连接，注意单引号：

<img [src]="'../../content/Laptop/' + laptop.iconFileName" />

属性绑定计算 表达式.

尽管更简洁的方法可能是在您的组件中编写一个帮助程序方法，该方法重写这些文件名以在公共路径前面添加，这样您就不会在模板中乱扔一堆 '../../content/Laptop/' +.

编辑我不太确定 {{image}} 里面的 <p> 是什么意思，但我没有解决这个问题。

将路径添加到图像 src 属性

Prepend path to image src attribute

html

angular2-template

angular