Aurelia 中的图像源绑定

Question

我想在 aurelia 组件中绑定 img 标签的 src 属性，我该怎么做？

我正在以这种方式在 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`);
      });

这样绑定地址，图片加载不出来，像这样：

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

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">

不会有问题的:

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

<img src="/a5e81f19cf2c587876fd1bb08ae0249f.png">

显然，aurelia 中处理静态文件的方式有所不同。图片源是怎么改成这样的，正确的绑定图片源的方法是什么？

Answer 1

这是因为您正在使用 webpack 来打包您的项目。

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

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

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

在您的例子中，您将 img 标签绑定到动态 url。 Webpack 没有任何方法可以将它们捆绑到输出包中，因为那些 url 是在运行时间生成的。

您需要使用 require 关键字才能在运行时使用对于这样的目录结构：

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

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

<template>
  <img repeat.for="url of urls" src.bind="getUrl(url)">
</template>

编辑：

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

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

Aurelia 中的图像源绑定

Image source binding in Aurelia

javascript

webpack

aurelia