Как кешировать / сохранять изображения, реагировать и отображать их? - PullRequest
Новая
       10

Как кешировать / сохранять изображения, реагировать и отображать их?

0 голосов
/ 25 апреля 2018

У меня есть список URL-адресов к изображениям. Каждое из этих изображений иногда загружается, а иногда 404 (это означает, что изображение, загруженное в какой-то момент, может исчезнуть позже). 

let images = ['http://example.com/img1.jpg', ...];

Есть ли способ запросить эти изображения, сохранить их в памяти, если запрос выполнен успешно, и отобразить эти сохраненные изображения в React? 

componentDidMount() {
  this.setState({ savedImages: images.map(saveImage)} );
}

render() {
  return (
    <div><image src={this.state.savedImages[0]}/></div>
  );
}

1 Ответ

0 голосов
/ 25 апреля 2018

Хорошо, позвольте мне представить всю информацию из комментариев как полный ответ.

Примечание: Вопрос на самом деле не специфический для React, а ванильный JS.

Идея состоит в том, чтобы динамически создать экземпляр Image: 

/* Somewhere inside the React class, I think */

preloadImages = () => {
    let links = ["link1", "link2", "link3"]

    /* the one react-specific thing is this.setState */
    this.setState({ images: links.map((link, i) => {
        // create an Image instance
        var img = new Image()
        // setting handler for load complete
        img.onload = () => this.handleImageLoad(i)
        // set the src attribute for it. After this line image loading will start
        img.src = link
        // return object with indicate of image loading statement
        return {
            url: link,
            loaded: false
        }
    }) })
}

// nuff said, I suppose, this function is clear :)
handleImageLoad = index => {
    var { images } = this.state
    images[i].loaded = true
    this.setState({ images })
}

Очевидно, теперь вы можете использовать this.state.images для рендеринга и рендеринга только изображений, которые уже загружены:)

...