我正在try 在我的web应用程序中显示从我的计算机中 Select 的图像.我提到了下面的问题，它解决了我试图解决的问题.
How to display selected image without sending data to server?
我的html部分是这样的
<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>
我想在屏幕上显示选定的图像
<img id="target"/>
我该怎么做？
我还提到了FileReader个doctor .
试试这个
<input type="file" onChange={this.onImageChange} className="filetype" id="group_image"/>
向类添加方法
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]);
}
}
或者你可以用URL.createObjectURL
onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
this.setState({
image: URL.createObjectURL(event.target.files[0])
});
}
}
并显示图像
<img id="target" src={this.state.image}/>
For the hook version:
const [image, setImage] = useState(null)
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
setImage(URL.createObjectURL(event.target.files[0]));
}
}
return (
<div>
<input type="file" onChange={onImageChange} className="filetype" />
<img src={image} alt="preview image" />
</div>
)