사용자가 선택한 이미지를 페이지에 파일 형식 입력으로 렌더링하려고하므로 사용자가 이미지를 제출하고 업로드하기 직전에 미리 볼 수 있지만 그 값을 알 수 없습니다.
내가하려는 것은 입력 값을 <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] 삭제
몇 마디 만하겠습니다