通过 react-redux 中的 input 标签上传和显示图像文件

Question

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

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

据我所知，在我发送一个动作并通过减速器将其保存到状态后，图像会保存在状态中。

我的问题是这样的：在另一个组件中，我通过 useSelector 访问状态下的图像并将其用作图像标签中的源，但图像出现损坏。 基本上，我只是希望能够将状态中保存的图像作为图像标签的来源。

非常感谢任何解释、教程或链接。我试图避免使用后端，因为我正在处理的应用程序非常小，不需要后端，但如果这是最简单的答案，我愿意。

谢谢！

Answer 1

为图片创建一个url，把它放在img标签的src中：

   const ImageUrl =  URL.createObjectURL(file);

或

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