循环中的图像src.bind给出404

Question

我有这个观点：

<ul class="list-group">
    <li repeat.for="app of apps" class="list-group-item ${app.id === $parent.selectedId ? 'active' : ''}">
        <img alt="" class="img-thumbnail" src.bind="app.icon">
    </li>
</ul>

虚拟机：

apps=[
  {
    id:getId(),
    routename:'config',
    name:'Configuration',
    icon:'parametres.png'
  },
  {
    id:getId(),
    routename:'import',
    name:'Import',
    icon:'../static/images/import.png'
  },
  {
    id:getId(),
    routename:'stats',
    name:'Statistiques',
    icon:'../static/images/parametres.png'
  }
];

如您所料，我尝试动态设置src属性。 parametres.png位于src文件夹中，其他图像先备份一次，然后再置于static/images文件夹中（我尝试了不同的路径）。

图像从不显示在浏览器中：

控制台日志：

和：

我是Aurelia / JavaScript的新手，但我了解webpack应该先对图片做一些操作，然后才能在您的应用中看到它们，在这种情况下，由于某种原因，它无法完成工作，因此我的图片不能见过。

我做错了什么？

Answer 1

您需要提前告知webpack您将要加载这些图像。

import parametersImg from "parametres.png";

...

    icon: parametersImg
...

仅供参考： 你有一点错字： 参数=>参数

Answer 2

有了这些建议，我发现了一个回旋处：

localhost/

@avrahamcool：没有错别字；），只是我是法语，所以有时文件名是法语的....无论如何，感谢您的注意，它可能是错别字：）

感谢您的时间和回答。