我不知道如何使用 img 标签显示图像。我通过<input type="file"/> 获取文件答案

【问题标题】：I can not wrap my mind how to show images using img tags. I am getting a file through<input type="file"/>我不知道如何使用 img 标签显示图像。我通过<input type="file"/> 获取文件
【发布时间】：2021-10-31 05:34:02
【问题描述】：

当我在控制台中检查输入时，我从输入中获取此数据。

文件{名称：“photo_2021-08-25_23-04-02.jpg”，lastModified：1629921880548，lastModifiedDate：2021 年 8 月 25 日星期三 23:04:40 GMT+0300（莫斯科标准时间），webkitRelativePath：“”，大小：61087，...}

<form autoComplete="off" noValidate className={classes.form} onSubmit={handleSubmit}> {console.log(postProduct.selectedFile[0])} <input name="selectedFile" type="file" multiple={true} accept=".jpeg, .png, .jpg" onChange={(e) => {setPostProduct({ ...postProduct,selectedFile: e.target.files,});}}/>

在我的图片标签中应该显示图片

  <img className={classes.img} src={product.selectedFile[0]} alt={product.title}/> {console.log(product.selectedFile[0])}

我正在获取此类数据data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtc.... 重 1.7Mb。它不在页面上呈现。当我尝试访问上面显示的对象属性时，它不起作用，并且在图像标签上它给出了 [0] undefined 的错误，尽管有诸如 0 、 1 等键的属性。

【问题讨论】：

data:image/jpeg;base64,/9j/... 即图像，其内容的base64版本，只需将其作为字符串放在img标签的src属性上，<img src="data:image/jpeg;base64,/9j/...." />
这能回答你的问题吗？ How to display Base64 images in HTML
“我收到了这种类型的数据”——你是吗？因为看起来您将文件直接传递给 src 属性，而不使用 FileReader 将其转换为 data URL。

标签： javascript reactjs image input react-hooks

【解决方案1】：

我无法完全理解您的问题。但是我通过客户端的控制输入文件显示图像的方式是使用 API：

首先：上传图片，发送到服务器，服务器保存图片并响应图片的URL。

其次：为图像的源设置服务器响应 URL。

【讨论】：