小编Gal*_*old的帖子

我正在尝试将标签的src属性绑定到imgaurelia组件中，该怎么做？

我正在以reapeat.for这种方式循环创建一些图像：

<img repeat.for="picture of infoboard.memberPictures" src.bind="picture">

其中，memberPictures数组来自视图模型，的值picture是相对地址：../../../assets/pictures/img_avatar.png。

在视图模型中，我从数据库中获取成员的信息，然后通过处理数据，以memberPictures这种方式填充数组：

this.httpClient.fetch(`boards/membersof/${this.infoboard.id}`)
      .then(response => response.json())
      .then(data => {
        this.infoboard.memberPictures = data.result.map(element => `../../../assets/pictures/${element.profile_pic}.png`);
      });

通过这种方式绑定地址，将不会加载图像，如下所示：

并且浏览器控制台显示以下错误：

this.httpClient.fetch(`boards/membersof/${this.infoboard.id}`)
      .then(response => response.json())
      .then(data => {
        this.infoboard.memberPictures = data.result.map(element => `../../../assets/pictures/${element.profile_pic}.png`);
      });

检查元素时，成员头像的图片标签是这样的：

img_avatar.png:1 GET http://localhost:8080/assets/pictures/img_avatar.png 404 (Not Found)

但是，如果我们为图像源提供静态图像，且其静态地址与上述示例中生成的地址完全相同，如下所示：

<img src.bind="picture" class="au-target" au-target-id="10" src="../../../assets/pictures/img_avatar.png">

不会有问题：

现在通过检查元素，结果是不同的：

<img repeat.for="picture of infoboard.memberPictures" src.bind="../../../assets/pictures/img_avatar.png">

显然，在aurelia中处理静态文件有所不同。图像源如何以此方式更改，以及绑定图像源的正确方法是什么？