So zeigen Sie ein Bild aus Eingangstyp = Datei in reactJS

Question

Ich versuche, ein Bild von meinem Computer in meiner Web App angezeigt. Ich habe die folgende Frage angesprochen, die auf die Frage eingeht, die ich beheben möchte.

How to display selected image without sending data to server?

Ich habe meine HTML-Teil wie dieses

<div className="add_grp_image_div margin_bottom"> 
     <img src={img_upload} className="add_grp_image"/> 
     <input type="file" className="filetype" id="group_image"/> 
     <span className="small_font to_middle">Add group image</span> 
     <img id="target"/> 
</div> 

ich das ausgewählte Bild in

<img id="target"/> 

angezeigt werden soll, wie ich dies tun kann?

Ich habe FileReader Docs auch verwiesen.

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 1

diese

<input type="file" onChange={this.onImageChange.bind(this)} className="filetype" id="group_image"/> 

Add-Methode zur Klasse Versuchen

onImageChange(event) { 
     if (event.target.files && event.target.files[0]) { 
      let reader = new FileReader(); 
      reader.onload = (e) => { 
       this.setState({image: e.target.result}); 
      }; 
      reader.readAsDataURL(event.target.files[0]); 
     } 
    } 

Und Anzeigebild

<img id="target" src={this.state.image}/>