title: How to display an image in Angular from a static backend path?
body: <p>I have a path in backend side where I save my images.
  I can get the path from mongo and reproduce this in angular, but, when I use the tag with src bind it doesn't show the image and any errors:</p>
  
  <p><strong>The path inside the component:</strong></p>
  
  <pre><code>this.profileService.getImg().subscribe(res =&gt; this.imagePath = res['img']);
  </code></pre>
  
  <p><strong>The return of a console log:</strong></p>
  
  <pre><code>console.log(this.imagePath);
  
  http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg
  </code></pre>
  
  <p><strong>The html tag:</strong></p>
  
  <pre><code>&lt;img [src]="imagePath"&gt;
  </code></pre>
  
  <p>I've tried several ways that I found in other posts, but couldn't make it works.
  Any idea of what is happening and how can I solve this?</p>
  
  <p><strong>Updates and more Details</strong></p>
  
  <p>On the server side I'm returning the path from mongo by this way:</p>
  
  <pre><code>router.get('/:id', (req, res, next) =&gt; {
      Avatar.getAvatarById(req.params.id, (err, avatar) =&gt; {
          if(err) throw err;
          if(!avatar){
              return res.json({success: false, msg: 'No avatars found'});
          }
          res.json({
              success: true,
              avatar: avatar
          });
      });
  });
  </code></pre>
  
  <p>Where <strong>Avatar.getAvatarById</strong> is:</p>
  
  <pre><code>module.exports.getAvatarById = function(id, callback){
      const query = { avatar: {$regex: ".*"+id+".*" }}
      Avatar.findOne(query, callback);
  }
  </code></pre>
  
  <p>And I'm exposing the avatars path like that:</p>
  
  <pre><code>app.use('/avatars', express.static('avatars'));
  </code></pre>
  
  <p>When I try to access the path by taping <a href="http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg" rel="nofollow noreferrer">http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg</a> in the browser, it returns the json instead of render the image.</p>
  
  <pre><code>{
   "success":true,
   "avatar": {
       "_id":"5dc17fc9f383424158c59754", 
       "avatar":"http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg","__v":0
   }
  }
  </code></pre>
  
  <p>Also tried to overcome security by using bypassSecurityTrustResourceUrl and use *ngIf to display when the url is there.</p>
  
  <pre><code>this.photoUrl = this.sanitizer.bypassSecurityTrustUrl(res['avatar']['avatar']);
  
  &lt;img *ngIf="photoUrl" [src]="photoUrl"&gt;
  </code></pre>
  
  <p>It doesn't return any errors and stil doesn't display the image.</p>
  
  <p>If I try by tapping the path inside <code>bypassSecurityTrustUrl</code> function to test, and remove the *ngIf, it returns:</p>
  
  <pre><code>null:1 GET http://localhost:4200/null 404 (Not Found)
  </code></pre>