Reactjs 选择后如何将图像添加到我的src

当用户从我的文件输入中选择一个新图像时，我试图在我的src中显示图像。 我首先在我的React应用程序中将我的img src设置为

src={”http://localhost:3000/“+this.props.file}

工作正常，其中

this.props.file

类似于

public/1583271311520 audioplayer.jpg

，这是我在获取请求中从数据库中获取的数据

    this.state = {
          image: {},
        };

   componentDidMount() {
    const { match: { params} } = this.props;
        let album = this.state.album;
        fetch(`http://localhost:3000/albums/${params.albumId}`)
        .then((response) =>
          response.json())
        .then((data) => {
              this.setState({ image: data[0].path });

            }).catch((error) => {
                console.log("Error " + error)
              })
     }

其中数据如下所示：

this.props.file

s父文件是this

file={this.state.image}

我的问题是，当用户使用文件输入选择img src时，如何将

event.target.files[0]

添加到img src中，以便在选择新图像时可以在其中显示图像

我首先将图像设置为

当我试图在这里设置onChange时：

---

但我认为我的问题是，在设置图像时，我要更改的图像不是来自

localhost:3000

，因此无法正确渲染。因此，当用户选择图像时，我如何使用onChange或其他方法将图像添加到img src中。

我相信您所说的是用户选择的文件（由

URL.createObjectURL（）

生成）不起作用时的图像URL，但是您已经确定了问题是，该URL被附加到本地主机域，即

既然你已经发现了问题所在，那么你很快就能回答自己的问题了。只需将URL的主机部分存储为状态的一部分：

.then((data) => {
    this.setState({ image: `http://localhost:3000/${data[0].path}` });

现在，当您使用来自AJAX调用的图像时，它将拥有完整的域，但是当您使用URL blob（来自上传的文件）时，它不会

.then((data) => {
    this.setState({ image: `http://localhost:3000/${data[0].path}` });