Comment afficher une image sélectionnée dans le type d'entrée = fichier dans reactJS

Question

J'essaie d'afficher une image sélectionnée sur mon ordinateur dans mon application Web. J'ai renvoyé la question suivante qui répond à la question que j'essaie de régler.

How to display selected image without sending data to server?

J'ai ma part html comme celui-ci

<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> 

Je veux afficher l'image sélectionnée dans

<img id="target"/> 

Comment puis-je faire cela? J'ai aussi référé FileReader docs.

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

Answer 1

Essayez cette

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

méthode Ajouter à la classe

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]); 
     } 
    } 

Et l'image d'affichage

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