Блог

Я реализую загрузку нескольких изображений. Пользователь должен иметь возможность выбирать изображения и просматривать небольшой предварительный просмотр выбранных изображений. Я сохраняю URL-адрес изображения в массиве и повторяю URL-адрес для отображения изображений. Проблема в том, что изображение не обновляется при предварительном просмотре. Т.Е. первое, второе и т.д. Изображение то же самое (см. Прикрепленное изображение). Когда я смотрю на URL-адрес изображения в виде текста, становится ясно, что ссылки разные и ведут к разным изображениям (см. Рисунок). Поэтому я не понимаю, почему одно и то же изображение отображается на всех итерациях, хотя URL-адрес отличается.

 export class ImageUploadView extends Component {

constructor(props) {
    super(props);
    this.onChangeImage = this.onChangeImage.bind(this);
    this.fileObj = [];
    this.fileArray = [];
}

onChangeImage (e) {
  this.fileObj.push(e.target.files)
        for (let i = 0; i < this.fileObj[0].length; i  ) {
            this.fileArray.push(URL.createObjectURL(this.fileObj[0][i]))
        }
}

  render() {


    return (
      <React.Fragment>
      <div className="card card-body mt-4 mb-4">


        <h1>Add Image</h1>

        <div>
        <input type="file" onChange={this.onChangeImage} multiple ref={this.inputRef} /> 

        {(this.fileArray || []).map((url) => (

            <MDBRow key={url} style={{ margin: '10px', display: 'inline-block' }}>
              <MDBCol>
                <MDBCard style={{ width: '5rem' }}>
                  <MDBCardImage className="img-fluid" src={url} waves />
                  <MDBCardBody>
                    <p> {url} </p>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBRow>
          
                    ))}
                
          </div> 


      </div>
      </React.Fragment>
    );
  }
}