Javascript 是否可以显示由输入元素选择的图像？

我希望显示输入元素的选定图像。这可以在本地文件上执行，访问映像客户端，还是需要将映像上载到服务器

这是我的反应尝试。我可以使用

inputElem.files[0].name从输入元素访问正确的文件名。当我试图为其设置图像元素时，将显示断开的图像图标，并且不会出现任何错误

const-App=（）=>{
//状态来跟踪img元素src。默认值可以正常工作。
const[imgSrc，setImgSrc]=useState（'/images/test.jpg'）
函数handleImgUpload（）{
常量url='/images/'+e.target.files[0]。名称
setImgSrc（url）
console.log（url）///images/26e3e793-98f5-4720-9f82-8963276d5e27.JPG
}
函数handleImgLoadSuccess（）{
console.log（'image-loaded！'）
}
函数handleImgLoadError（）{
console.log（'未加载映像'）
}
返回(
选择一个图像：
handleImgUpload（e）}
/>
)
}

然而，在控制台中，url似乎是正确的

嘿–我知道你想做什么，但看起来这行不通。您需要创建一个新的文件读取器

const showTempImage = (e) => {
    const file = e.target.files[0];
    const img = document.createElement("img");

    const reader = new FileReader();

    reader.addEventListener('load', (e) => {
        img.src = e.target.result;
    });

    reader.readAsDataURL(file);

   // Append the img tag to the dom somewhere
}

这通过创建一个正确的blobURL实现了

const inputImg=e.target.files[0]
const url=url.createObjectURL（inputImg）
//水滴：http://localhost:3000/test-img.jpg

生成的文件保留在内存中，需要删除以创建内存泄漏

URL.revokeObjectURL（URL）

这似乎也可以通过FileReader实现，尽管有。
当您尝试显示该图像时，该图像是否存在于服务器上？@mplungjan否，我只是在训练如何在客户端访问和显示它。
const url='/images/'+e.target.files[0].name
不存在客户端听起来你需要这样做这正是我要找的。谢谢谢谢，达米拉雷，这似乎奏效了。我选择了稍微快一点的
createObjectURL
。不错！祝你一切顺利