Aurelia 中的图像源绑定

Answer 1

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

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

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

顺便说一句，这就是为什么我们需要对所有 aurelia 组件使用

PLATFORM.moduleName()

，因为 webpack 默认情况下不会选择这些组件。

在您的情况下，您将

img

标签绑定到动态网址。 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`));
      });