在react-redux中通过via input标签上传并显示图片文件

Question

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

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

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

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

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

谢谢！

Answer 1

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

   const ImageUrl =  URL.createObjectURL(file);

或

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

Upload and display image file through via input tag in react-redux