时间戳

首页 > 解决方案 > 从本地机器加载图像并使用 react js 渲染

reactjs - 从本地机器加载图像并使用 react js 渲染

问题描述

我正在尝试从本地机器加载图像然后显示它，问题是当我加载图像时，它没有给我文件的绝对路径，而是给出了一个假路径，如下所示：

C:\fakepath\image0.jpg

问题是这个路径不存在所以会报错，如何获取绝对路径，然后在上传图片的时候渲染图片？这是我拥有的代码：

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isImage: false,
      val: "",
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(e) {
    this.setState({
      mySrc: e.target.value,
      isImage: true,
    });
  }
  render() {
    const { isImage, val } = this.state;
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="file"
            id="imgInp"
            value={val}
            onChange={this.handleChange}
          />
          <img id="myImg" src={val} alt="car image" />
        </form>
        {isImage ? (
          <img src={require(val)} />
        ) : (
          <p> Please select an image </p>
        )}
      </div>
    );
  }
}

export default MyApp;

标签： reactjs

解决方案

该文件存储在event.target.files[0]not ，然后您需要使用URL.createObjectURL()event.target.value为该文件创建一个 URL

所以在你的情况下应该是

mySrc: URL.createObjectURL(event.target.files[0])

推荐阅读