通过react redux中的输入标签上传并显示图像文件

Question

我在上传单个图像的组件中有一个输入标记。

<input 
type="file"
accept=".png,.jpeg"
onChange={e => dispatch(setProfileImage(e.target.files[0]))}
/>

从我所看到的，在我调度一个操作并通过reducer将其保存到状态后，图像会被保存到该状态。

我的问题是：在另一个组件中，我通过useSelector访问状态中的图像，并将其用作图像标记中的源，但图像似乎已损坏。基本上，我只想能够使用状态中保存的图像作为图像标签的来源。

任何解释、教程或链接都将不胜感激。我尽量避免使用后端，因为我正在开发的应用程序非常小，不需要后端，但如果这是最简单的答案，我愿意这样做。

谢谢！

Answer 1

为图像创建一个url，并将其放在img标签的src中：

const ImageUrl =  URL.createObjectURL(file);

或

<img src={URL.createObjectURL(file)}  alt={file.name} />