I have a list of URLs to images. Each of these images sometimes load and sometimes 404 (meaning that an image that loaded at some point may disappear later).

let images = ['.jpg', ...];

Is there a way to request these images, to save them in memory if the request is successful, and to display those saved images in React?

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

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

I have a list of URLs to images. Each of these images sometimes load and sometimes 404 (meaning that an image that loaded at some point may disappear later).

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

Is there a way to request these images, to save them in memory if the request is successful, and to display those saved images in React?

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

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

• javascript
• reactjs
• redux
• html5-canvas
• react-redux

• 1 You could use service worker to store images in cache. – dfsq Commented Apr 25, 2018 at 7:48
• 1 The question is not React-specific, I think. Once image is requested and loaded, it is saved in browser cache. The technique of preloading image with JS you can find there stackoverflow./questions/33894508/… – Limbo Commented Apr 25, 2018 at 7:59
• @LevitatorImbalance is there a way to tell if the image was successfully loaded? – raphaelrk Commented Apr 25, 2018 at 8:16
• Yes see here. But why wouldn't an image succesfully load? :D – DarkBee Commented Apr 25, 2018 at 8:20
• @raphaelrk Yep :) developer.mozilla/en-US/docs/Mozilla/Tech/XUL/Attribute/… – Limbo Commented Apr 25, 2018 at 8:50

1 Answer 1

Okay, let me represent the whole information from ments as a plete answer.

Remark: The question is actually not React-specific, but vanilla JS.

The idea is to dynamically create the Image instance:

/* 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 plete
        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[index].loaded = true
    this.setState({ images })
}

Obviously, now you can use this.state.images in render and render only images that are already loaded :)