I'm experiencing an issue where I am unable to capture the input image from my device.
Instead, it keeps showing me a default image that I have set and provides a fake path for the input.
Can someone help me solve this problem and provide some suggestions?
Thank you!
JavaScript:
const [Image, setImage] = useState('')
const fetchImage = async (e) => {
// console.log('e is ',e)
try {
const response = await import('./img/noprofil.jpg')
console.log('res is ', response)
setImage(response.default)
console.log("image in response is " + response)
}
catch (err) {
console.log('error is ', err)
} finally {
}
}
HTML:
<div className="col-3 ">
<div className="container">
<div className="img-holder">
<img src={Image} className="rounded" alt="" />
</div>
<input type="file" accept="image" name="image-upload" id="input" onChange={fetchImage} />
<div className="label">
<label className="image-upload" htmlFor="input"> Change </label>
</div>
</div>
</div>