title: Angular 5 net::ERR_UNKNOWN_URL_SCHEME for image from express server
body: <p>I am having some trouble displaying an image from my node.js (express server) localhost:3000/assets/images/uploads. This works fine when I enter this URL in the browser, the browser display the image but when I assign this to a variable in my Angular 5 app and use binding to the , I get  </p>
  
  <blockquote>
    <p>Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME.</p>
  </blockquote>
  
  <p>I am attaching the code below. Please review it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class ProfileComponent implements OnInit {
  
    user: any;
    url: "";
    path: SafeUrl;
    public uploader:FileUploader = new FileUploader({url: URL, itemAlias: 'photo'});
    
    constructor(private authService: AuthServiceService,
                private userService: UsersService,
                private http: Http,
                private el: ElementRef,
                private _DomSanitizationService: DomSanitizer) {
  
        
      
      
      
     }
  
  
    ngOnInit() {
      this.user = this.authService.user;
      console.log(this.user);
      this.path = this._DomSanitizationService.bypassSecurityTrustUrl(this.user.img);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="file" name="photo" ng2FileSelect [uploader]="uploader" /&gt;
  &lt;!-- button to trigger the file upload when submitted --&gt;
  &lt;button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"&gt;
        Upload with ng-2 file uploader
  &lt;/button&gt;
  
  
  &lt;div class="user profile"&gt;
   &lt;div class="ui container"&gt;
    &lt;div class="ui grid"&gt;
     &lt;div class="ui five wide column"&gt;
      &lt;div class="ui card"&gt;
    
        &lt;a class="image poping up" href="" id="profile-avatar" data-content="avatar" data-variation="inverted tiny" data-position="bottom center"&gt;
         &lt;img [src] = "path" target="_blank" title="Hamza"/&gt;
        &lt;/a&gt;
  
       &lt;div class="content"&gt;
        &lt;span class="header text center"&gt;Hamza&lt;/span&gt;
        &lt;span class="username text center"&gt;Hamza&lt;/span&gt;
       &lt;/div&gt;
       &lt;div class="extra content"&gt;
        &lt;ul class="text black"&gt;
       
          &lt;li&gt;&lt;i class="octicon octicon-location"&gt;&lt;/i&gt; Lahore&lt;/li&gt;
        
        
          &lt;li&gt;
           &lt;i class="octicon octicon-mail"&gt;&lt;/i&gt;
           &lt;a href="" rel="nofollow"&gt;email&lt;/a&gt;
          &lt;/li&gt;
         
  
         &lt;li&gt;&lt;i class="octicon octicon-clock"&gt;&lt;/i&gt; date&lt;/li&gt;
   
   
  
        &lt;/ul&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="ui eleven wide column"&gt;
      &lt;div class="ui secondary pointing menu"&gt;
       &lt;a class="activity"&gt;
        &lt;i class="octicon octicon-repo"&gt;&lt;/i&gt; Posts
       &lt;/a&gt;
       &lt;a class="item"&gt;
        &lt;a class="activity"&gt;
         &lt;i class="octicon octicon-rss"&gt;&lt;/i&gt; Top Posts
        &lt;/a&gt;
       &lt;/a&gt;
      &lt;/div&gt;
      
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>