Image src.bind in a loop gives a 404

Question

I have this view :

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

The VM :

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'
  }
];

So as you can guess I try to have my src attribute set dynamically. parametres.png is in src folder and other images are up one time and then in static/images folder (I have tried different paths).

The images never show in the browser:

Console logs :

and :

I'm new to Aurelia/Javascript but I understand that webpack should do something to pictures before you can see them in your app, and in this case for some reason it doesn't do the job, so my pictures cannot be seen.

What did I do wrong ?

I don't think webpack can process your images like this, can you change your apps array to have the images imported, like this: icon:require('./parametres.png') ... — Rabah, Jul 14 '18 at 09:20

avrahamcool · Answer 1 · 2018-07-15T14:44:37.577

0

you need to let webpack know in advance that you are going to load those images.

import parametersImg from "parametres.png";

...

    icon: parametersImg
...

FYI: you have a little typo: parametres => parameters

edited Jul 15 '18 at 14:44

answered Jul 15 '18 at 07:32

avrahamcool

13,888
5
47
58

score 0 · Answer 2 · answered Jul 16 '18 at 10:24

With these suggestions I found a sort of a roundabout :

var parametres_png= require("./parametres.png");
...
apps = [
    {
      id: getId(),
      routename: 'config',
      name: 'Configuration',
      icon: parametres_png,
      backgroundColor:'rosybrown'
    },
...

@avrahamcool : no typo ;), just that I'm french so sometimes files names are in french .... Anyway Thanks for noticing it, It could have been an Typo :)

Thanks for your time and answers.

Image src.bind in a loop gives a 404

2 Answers2