Javascript Aurelia中的图像源绑定

我正在尝试在aurelia组件中绑定

img

标记的

src

属性，我如何才能这样做

我正在以

重复方式创建一些图像。对于
循环，如下所示：

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`);
      });



其中，
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`);
      });

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


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

img_avatar.png:1获取http://localhost:8080/assets/pictures/img_avatar.png 404（未找到）

当检查元素时，成员化身的图片标签如下：



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



没有问题：


现在通过检查元素，得到了不同的结果：



显然，在aurelia中处理静态文件是有区别的。图像源是如何以这种方式更改的？绑定图像源的正确方式是什么？
这是因为您正在使用webpack捆绑您的项目

webpack所做的一件事是将所有静态文件（图像、字体等）打包到捆绑包中，然后用指向捆绑包中相同资产的不同“url”替换所有静态引用

在运行时，您无法访问包外的内容

顺便说一下，这就是为什么我们需要对所有aurelia组件使用
PLATFORM.moduleName（）
，因为webpack在默认情况下不会选择这些组件

在本例中，您将
img
标记绑定到动态URL。Webpack没有任何方法将它们捆绑到输出捆绑包中，因为这些url是在运行时生成的

您需要使用关键字使其在运行时工作
对于这样的目录结构：




编辑：

在您的情况下，只需使用：

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