React中上传图片至网站并设置为Card组件图片失败问题排查

我通过表单收集信息，提交后生成Card组件，但上传图片后没法设置为卡片图片，出现了错误。

表单上传相关代码 #

const [imgUrl, setImgUrl] = useState("");

const onChangeHandler = (event) => {
  const file = event.target.files[0];
  console.log(file);
  const reader = new FileReader();
  reader.onload = (file) => {
    setImgUrl(reader.result);
  };
  reader.readAsDataURL(file);
 };

<Form.Group controlId="formFileSm" className="mb-3">
<Form.Label>Upload a picture</Form.Label>
<Form.Control type="file" size="sm" onChange={onChangeHandler} />
</Form.Group>

Card组件代码 #

import React, { Component } from "react";

class Card extends Component {
  constructor(props) {
  super(props);
  }
  render() {
    const items = this.props.items.map((item) => {
      if (item.imgUrl) {
        return (
          <div className="card col-md-2">
            <img src={require(`${item.imgUrl}`)} className="img-fluid" />
            <h4 className="pt-4">name : {item.name}</h4>
            <span className="pb-2">PhoneNumber : {item.phoneNumber}</span>
          </div>
        );
      } else {
        return (
          <div className="card col-md-2">
            <img src={require("../image/3user.jpg")} className="img-fluid" />
            <h4 className="pt-4">name : {item.name}</h4>
            <span className="pb-2">PhoneNumber : {item.phoneNumber}</span>
          </div>
        );
      }
    });
    return (
      <div className="container-fluid row justify-content-center">{items}</div>
    );
  }
}

export default Card;

问题原因 #

核心错误是用require处理了动态生成的Data URL。require是webpack用来加载编译时已知的静态本地资源的工具，而你通过FileReader.readAsDataURL得到的是运行时生成的base64格式字符串，不属于静态资源范畴，用require包裹会导致webpack无法识别，从而报错。

解决步骤 #

1. 修改Card组件的图片src
   直接把require(${item.imgUrl})替换成item.imgUrl，因为item.imgUrl本身就是可以直接作为图片src的Data URL：

   // 修改前
   <img src={require(`${item.imgUrl}`)} className="img-fluid" />
   // 修改后
   <img src={item.imgUrl} className="img-fluid" />
   

2. （可选）优化事件参数命名
   reader.onload的参数是事件对象，不是文件，把参数名改成event更规范，同时也可以用event.target.result获取结果：

   reader.onload = (event) => {
     setImgUrl(event.target.result);
   };
   

内容的提问来源于stack exchange，提问作者Ashraf