Изображение, хранящееся в FileList, не отображается в React

Question

Я работал над загрузкой файлов в React, сохранял файл в FileList и показывал предварительный просмотр. Изображение, кажется, сохранено правильно, но оно не отображается, и текст alt продолжает отображаться.

this.props.file содержит что-то вроде этого: file: "blob:http://localhost:3000/1d648245-4447-41a4-b11e-a5a7b385bb9b"

Код компонента загрузки следующий:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import './Upload.css';
import { setFile } from '../../actions/imagefile';

class Upload extends Component {
  static propTypes = {
    history: PropTypes.object,
    setFile: PropTypes.func,
    file: PropTypes.object,
  }

  handleChange = (event) => {
    this.props.setFile({
      file: URL.createObjectURL(event.target.files[0]),
    });
  }

  render() {
    return (
      <div>
        <input type="file" onChange={this.handleChange} />
        <img src={this.props.file} alt="reviewed img" />
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  file: state.imageFile.file,
});

export default connect(mapStateToProps, {
  setFile,
})(Upload);

Answer 1

this.props.file содержит что-то вроде этого: file: "blob:http://localhost:3000/1d648245-4447-41a4-b11e-a5a7b385bb9b".

Из этого я делаю вывод, что this.props.file - это объект со структурой

{
  file: "blob:http://localhost:3000/1d648245-4447-41a4-b11e-a5a7b385bb9b"
}

И ваш propTypes определение также гласит: props.file - это объект

file: PropTypes.object

Поэтому вы должны изменить свой код на

<img src={this.props.file.file} alt="reviewed img" />

Проверить ссылку:

https://stackblitz.com/edit/react-ubtvsc?file=Upload.js

Но вы должны реорганизовать свой код, чтобы избежать этого ненужного вложения.