How to Show Local Picture in Web Page

How can I display an image from the local machine on a webpage

In most recent browsers, links to local files ( file:/// ) do not open, for security purposes. In your case, the browser does not display an image that resides on a file on your hard disk. This reason also explains why it works when you save your page locally.

How can I display locally stored images on an internet website?

This sounds like security settings on the web browser, which are probably set to a level that prevents local filesystem access for an internet site.

Security settings can be edited by users, in a way specific to each browser. for example for IE it's Tools -> Internet Options -> Security

How to display local images placed on client machine in HTML webpages

Web pages aren't allowed to access file:/// URLs for security reasons, there is no way around this. However, if you make the same files accessible via another protocol - this can work. For example, you can put the following line into your add-on's chrome.manifest file:

resource myaddon file:///C:/Images

This will create a resource protocol alias pointing to that directory - and the resource protocol can be used by webpages. Meaning that the pages will be able to use the image C:\Images\1.jpg as resource://myaddon/1.jpg.

You can also add resource protocol aliases dynamically. Just make sure you make only images accessible in this way and not all disk content - you might be opening a security hole otherwise.

Showing a local image file in browser

When you use the function keyword, you loose the access to this. You need to use arrow function () => instead. Also, you don't need ViewChild in your specific case. I would change your code to following in order to work:

Use *ngIf to make sure that the image does not load until it has data. Bind the image source to some variable that will contain the source image data. Same goes for destination image. Change the <img> tags to following:

<img *ngIf="sourceImage" src={{sourceImage}} alt="Source" width="100" height="100"/>

<img *ngIf="destinationImage" src={{destinationImage}} alt="Destination"/>

... and your component.ts code will look like this:

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  sourceImage: string;
  destinationImage: string;

  load(event: EventTarget): void {
    const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
    const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
    const files: FileList = target.files;
    const file = files[0];
    console.log(file);    
    const reader  = new FileReader();    
    reader.onloadend = () => {
      console.log('done loading');
      this.sourceImage = reader.result;

    };

    console.log('now loading');
    reader.readAsDataURL(file);
  }
}

---

Related Topics