Как зациклить изображения в моем приложении

Question

Я пытаюсь установить изображения.Он отлично работает, когда я устанавливаю первое изображение, но когда я пытаюсь загрузить второе изображение, он создает второе поле изображения, но ничего не отображает на нем, вместо этого отображает его поверх первого окна изображения.Я хочу, чтобы они были отделены друг от друга.

Я пытался использовать blob напрямую, возвращая imgUrl (return imgUrl) в функцию showImage, но он также не устанавливает blob в img src.Как я могу зациклить и установить все изображения отдельно в каждом поле, как только будет получен рис (URL)?

class Card extends Component {
  constructor({props, pic, token}) {
    super(props, pic, token);
    this.state = { 
      pic: pic
    };

readResponseAsBlob(response) {
  return response.blob();
}

validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

logError(error) {
  console.log('Looks like there was a problem: \n', error);
}

showImage(responseAsBlob) {
  var container = document.getElementById('images');
  var imgElem = container.getElementsByTagName('img')[0];
  var imgUrl = URL.createObjectURL(responseAsBlob);
  imgElem.src = imgUrl;
  console.log(imgUrl);
}


  urlFetch(data) {
   fetch(data, { 
   headers: new Headers({
     'authorization': `Bearer ${this.props.token}`, 
     'Content-Type': 'application/json'
    })
  })
    .then(this.validateResponse)
    .then(this.readResponseAsBlob)
    .then(this.showImage)
    .catch(this.logError);
  }


  render() {
    const { pic } = this.state;

return (
             <a style={{width: 200, height: 250}} className='tc dib br3 ma2 pa2 grow bw2 shadow-5'>
              <div id='images'>
               <img style={{width: 175, height: 175}} className='tc myimage br3' alt='none' src={ this.urlFetch(pic) }/>
              </div>
              </a>
   );
  }
}

Answer 1

Проблема может быть здесь src={ this.urlFetch(pic) } Функция urlFetch возвращает обещание вместо фактического пути к изображению или данных. Вызовите эту функцию в componentDidMount hook и установите изображение, которое вы получаете от бэкэнда, в состояние и используйте это свойство состояния как src изображения.

Я вижу, что функция urlFetch, вручную изменяющая DOM для установки образа src, это немного сбивает с толку, поскольку функция, которую вы вызываете, выполняет свою работу неявно, а изменение DOM в реакции вообще не является хорошей практикой, и var imgElem = container.getElementsByTagName('img')[0]; изменит только первое изображение, так как вы получаете первое img в контейнере

Я бы также предложил визуализировать каждое изображение в соответствующем компоненте, объявив свойство состояния, которое будет содержать src изображения, извлечь изображение с сервера и затем обновить состояние.

class Card extends Component {

  constructor({props, token}) {
    super(props, token);
    this.state = { 
      src: ''
    };
  }

 readResponseAsBlob = (response) => {
  return response.blob();
 }

showImage = (responseAsBlob) => {
this.setState({ src: URL.createObjectURL(responseAsBlob) });
 }

  componentDidMount() {
    this.urlFetch(this.props.pic)
  }

  logError(error) {
    console.log('Looks like there was a problem: \n', error);
  }

  urlFetch(data) {
    fetch(data, { 
    headers: new Headers({
       'authorization': `Bearer ${this.props.token}`, 
       'Content-Type': 'application/json'
      })
    })
    .then(this.validateResponse)
    .then(this.readResponseAsBlob)
    .then(this.showImage)
    .catch(this.logError);
  }


  render() {
    const { src } = this.state;

    return (
      <a style={{width: 200, height: 250}} className='tc dib br3 ma2 pa2 grow bw2 shadow-5'>
        <div id='images'>
          <img style={{width: 175, height: 175: display: src ? 'block': 'none'}} className='tc myimage br3' alt='none' src={ src }/>
        </div>
      </a>
    );
  }
}