title: Image source binding in Aurelia
body: <p>I am trying to bind the <code>src</code> attribute of an <code>img</code> tag in an aurelia component, how can I do so?</p>
  
  <p>I'm creating some images in a <code>reapeat.for</code> loop this way:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img repeat.for="picture of infoboard.memberPictures" src.bind="picture"&gt;
  </code></pre>
  
  <p>In which, the <code>memberPictures</code> array comes from the view model, and the value of <code>picture</code> is a relative address: <code>../../../assets/pictures/img_avatar.png</code>.</p>
  
  <p>In the view model, I fetch members' info from the database and by processing the data, populate the <code>memberPictures</code> array this way:</p>
  
  <pre><code>this.httpClient.fetch(`boards/membersof/${this.infoboard.id}`)
        .then(response =&gt; response.json())
        .then(data =&gt; {
          this.infoboard.memberPictures = data.result.map(element =&gt; `../../../assets/pictures/${element.profile_pic}.png`);
        });
  </code></pre>
  
  <p>Binding the address this way, the images do not load, like this:</p>
  
  <p><img src="https://raw.githubusercontent.com/Galiold/references/master/aurelia-bind-img-src/src-bind-problem.png" alt="picture of the problem" title="problem with dynamic addressing"></p>
  
  <p>and also the browser console shows the following error:</p>
  
  <pre class="lang-sh prettyprint-override"><code>img_avatar.png:1 GET http://localhost:8080/assets/pictures/img_avatar.png 404 (Not Found)
  </code></pre>
  
  <p>when inspecting the elements, the picture tag for member avatar is this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src.bind="picture" class="au-target" au-target-id="10" src="../../../assets/pictures/img_avatar.png"&gt;
  </code></pre>
  
  <p>But if we provide the image source with a static image with the exact same address generated in the above example as shown below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img repeat.for="picture of infoboard.memberPictures" src.bind="../../../assets/pictures/img_avatar.png"&gt;
  </code></pre>
  
  <p>there will be no problem:</p>
  
  <p><img src="https://raw.githubusercontent.com/Galiold/references/master/aurelia-bind-img-src/src-bind-no-problem.png" alt="picture of the problem" title="no problem with static addressing"></p>
  
  <p>and now by inspecting elements there is different result:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="/a5e81f19cf2c587876fd1bb08ae0249f.png"&gt;
  </code></pre>
  
  <p>Apparently, there is a difference in handling static files in aurelia. How is the image source changed this way, and what is the correct way of binding the image source?</p>