前置图像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" />

属性绑定评估表达式。

虽然更简洁的方法可能是在您的Component中编写一个帮助器方法，重写这些文件名以预先设置这个公共路径，这样您就不会使用一堆'../../content/Laptop/' +来丢弃模板。

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