我正在尝试使用页面上输入的文件类型渲染用户选择的图像，因此用户将在提交和上传图像之前预览该图像，但我无法获得其价值。
我一直在尝试使用输入的值作为<img />组件的来源：
import React, { useState } from "react";
export default function Test() {
const [image, setImage] = useState(null);
return (
<div>
<form onSubmit={() => {
//Sumbit
}}/>
<input
type="file"
onChange={(e) => setImage(e.target.value)}
></input>
{image ? <img src={image} /> : null}
<button type={"submit"}></button>
</form>
</div>
);
}
但是它总是返回一个值- C:\fakepath\IMGName。有什么方法可以获取图像的值，以便将其渲染为图像？
export default function App() {
const [img, setImg] = useState(null);
const handleImg = (e) => {
setImg(URL.createObjectURL(e.target.files[0]));
}
return (
<div className="App">
<input type="file" onChange={handleImg} />
<img src={img}/>
</div>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句