Невозможно установить свойство 'src' с нулевым Angular - Typescript error - PullRequest
0 голосов
/ 02 сентября 2018

Я пытаюсь получить изображение с компьютера и пытаюсь установить это изображение в элемент изображения, но получаю следующую ошибку.

Невозможно установить свойство 'src', равное нулю

Кто-нибудь может помочь?

Это мой код файла компонента.

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'app';
    event: any;
    url: any;
    onSelectFile = (event) => { // called each time file input changes
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(event.target.files[0]); // read file as data url
            reader.onload = (event: any) => {
                this.url = event.result;
                console.log(this.url);
                var image = document.getElementById("#image") as HTMLImageElement;
                image.src = this.url;
            }
        }
    }
}

это мой код HTML-файла.

<img id="image"  height="200"> <br/>    
<input type='file' (change)="onSelectFile($event)">

Всякий раз, когда я устанавливаю значение своего элемента изображения, я получаю ошибку, упомянутую выше.

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

Укажите привязку атрибута src изображения к свойству url:

<img id="image" height="200" [src]="url">

Удалите весь код после присвоения ссылки на изображение свойству url.

export class AppComponent {
    title = 'app';
    event: any;
    url = '';

    onSelectFile = (event) => { // called each time file input changes
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(event.target.files[0]); // read file as data url
            reader.onload = (event: any) => {
                this.url = event.result;
            }
        }
    }
}
0 голосов
/ 03 сентября 2018

Я думаю, что id это "image", без "#", потому что вы используете метод getElementById.

...