title: Not allowed to load local resource: When loading images from file server
body: <p>I have an App (angular) and API (.net core) and I have a shared folder on a data server with 20k images. I would like to display image as part of a search result. Sound simple, unfortunately I'm not able to do it because some security issues in Chrome. This is internal application.</p>
  
  <p>So I have on the view:</p>
  
  <pre><code>&lt;div *ngFor="let drawing of drawings"&gt;
      &lt;img [src]="getPhotoURL(drawing.fileUrl)" height="300"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the example image path looks like below:</p>
  
  <blockquote>
    <p>\\data-3\eng$\ItemsDrawings\RZ10006.jpg</p>
  </blockquote>
  
  <p>and on the view backend - DomSanitizer to bypass Security:</p>
  
  <pre><code>getPhotoURL(url: string) {
     return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
  </code></pre>
  
  <p>So the error I'm getting:</p>
  
  <blockquote>
    <p>Not allowed to load local resource: file://data-3/eng$/ItemsDrawings\RZ10006.jpg</p>
  </blockquote>
  
  <p>I found that this is related to Chrome not allowing to access local files, which is understandable, but this is actually a data server.
  I've seen lot's of workaround how to pass bypass this in Chrome but I'm not going to make changes to Chrome for each user.</p>
  
  <p>I know I can load image to API and then pass it to the front end, but just wondering if this is the only option here?</p>
  
  <p>Could anyone put some light on the subject please? </p>
  
  <p>I got full access to the data server if there are any configuration that need to be done.  </p>