title: Angular Image cannot be loaded
body: <p>On the template <strong>list of users</strong>, I have a column to show the <strong>identity image</strong> (stored on database) of each user.</p>
  
  <p>On the <strong>template file</strong>, I have:</p>
  
  <pre><code>    &lt;td&gt; 
         &lt;img src="{{emptyStr.concat(user.pathImage.substr(user.pathImage.indexOf('/assets')))}}" style="max-width:30px"/&gt;
         &lt;br/&gt;
         {{user.nameImage}}
         &lt;br/&gt;
         {{emptyStr.concat(user.pathImage.substr(user.pathImage.indexOf('/assets')))}}
      &lt;/td&gt;
  </code></pre>
  
  <p>On the <strong>component file</strong>,  <code>emptyStr = "..";</code></p>
  
  <p>As displayed bellow:</p>
  
  <p><a href="https://i.stack.imgur.com/JwrFZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JwrFZ.png" alt="enter image description here"></a></p>
  
  <p>The name and the url of the image are displayed correctly.
  However, the image cannot be loaded.</p>
  
  <p>On firefox, there's no error.</p>
  
  <p>However on chrome, I got this error:
  <a href="https://i.stack.imgur.com/mXoMy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mXoMy.png" alt="enter image description here"></a></p>
  
  <p>Also, I got:
  <a href="https://i.stack.imgur.com/naTgE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/naTgE.png" alt="enter image description here"></a></p>
  
  <p>That means that this image doesn't exists on file <strong>upload</strong>, but no, that exists as displayed by this screenshot.
  <a href="https://i.stack.imgur.com/wihbL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wihbL.png" alt="enter image description here"></a></p>
  
  <p>I think there's a problem of synchronization, because after made some changes on sublime tool, the console <code>ng server</code> will update and both <strong>2 images are shown</strong>.</p>
  
  <p>Have you please any idea about solving that issue ?.
  Big thanks.</p>