Aurelia中的图像源绑定

Question

我正在尝试将标签的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中处理静态文件有所不同。图像源如何以此方式更改，以及绑定图像源的正确方法是什么？

Answer 1

这是因为您正在使用 webpack 来捆绑您的项目。

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

在运行时，您无法访问捆绑包之外的内容。

顺便说一句，这就是我们需要PLATFORM.moduleName()为所有 aurelia 组件使用的原因，因为 webpack 默认不会选择这些。

在您的情况下，您将img标签绑定到动态网址。Webpack 无法将它们捆绑到输出包中，因为这些 url 是在运行时生成的。

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

export class App {
  public urls:string[] = ["test", "t1", "t2", "t3"];

  getUrl(name)
  {
    return require(`./assets/${name}.png`);
  }
}

export class App {
  public urls:string[] = ["test", "t1", "t2", "t3"];

  getUrl(name)
  {
    return require(`./assets/${name}.png`);
  }
}

编辑：

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

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