Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
An image component for gracefully dealing with image errors, by providing a placeholder and retries on failure. Particularly useful in situations where your application might be used in poor signal areas such as when travelling on a train, a bus or aĀ car.
Visual Example
Browser loading images in variousĀ states
- Default browser behaviour when image fails due to badĀ signal
- With react-graceful-image placeholder
- With react-graceful-image disabled placeholder
- With react-graceful-image retriesāāāif the image fails to load, the package will gracefully re-attempt loading the imageĀ again
(note: these are not mutually exclusive, for example the default behaviour makes use of both a placeholder and retries together.)
Implementation
Placeholder
- Implemented as an SVG embedded into a Data URIāāāthis means that you donāt have to fire an extra HTTP request in order to download the placeholder, it is embedded right into the component
- The component also provides a way to customize the placeholder by changing itās color via the placeholderColor propāāāas well as via a regular styles or className props ( note that styles passed this way are also passed to the actualĀ image.)
- It also gives you the option of disabling the placeholder, in which case the image will not render at all until it is loadedāāāsince the image will not get rendered until it successully loads this also means that incase the image fails it will not take its intended space on the page and you will not get a broken imageĀ icon
Retry
- Implemented using setTimeout which plays around with the delay and the desired number of retries in an attempt to gracefully re-load theĀ image
- By default the delay in between retries doubles on every retry, this can however be modified via the retry.accumulate prop which accepts one of the following values āmultiplyā, āaddā, ānoopā and updates the retry algorithm accordingly (note you can also change the delay time and retryĀ count)
Usage Example
The below code snippet will load the given image, while the image loads it will display a blue SVG placeholder. If loading the image fails, then it will retry loading the image again for a maximum of 8 times, with initial delay of 2 seconds, which will then increase to 4 seconds, then to 8 seconds, then to 16 seconds, and so on (default retry configuration). It will also apply whatever styles are defined inside of the ācontent-imageā className to the placeholder (and the image once the imageĀ loads).
import React, { Component } from 'react'import Image from 'react-graceful-image'
class YourComponent extends Component { render() { return ( <Image src="path_to_image" className="content-image" alt="My awesome image" placeholderColor="#0083FE" /> ); }}
The below code snippet will load the given image, while the image loads it will display a light grey (default) SVG placeholder. If loading the image fails, then it will retry loading the image again for a maximum of 15 times, with initial delay of 3 seconds which will then increase to 6 seconds, then to 9 seconds, then to 12 seconds, and so on. It will apply 20px of padding to the placeholder (and the image once the imageĀ loads).
import React, { Component } from 'react'import Image from 'react-graceful-image'
class YourComponent extends Component { render() { return ( <Image src="path_to_image" width="150" height="150" style={{padding: '20px'}} alt="My awesome image" retry={{count: 15, delay: 3, accumulate: 'add'}} /> ); }}
Thanks for reading, for more usage details checkout the projects github page: https://github.com/linasmnew/react-graceful-image. You can also install it via npm using: npm install --save react-graceful-image
By the way, if youāre a Twitter person you can reach me there at linasmnew, (Iām new there š Ā š)
Introducing react-graceful-image was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.