+const myComponent = () => 
```
-will generate:
+will resolve to:
```js
-
+
```
+
If the image cannot be loaded, **`
+)
```
+
If an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.
### Show a "spinner" or other element before the image is loaded:
+
```js
-const myComponent = () =>
+const myComponent = () => (
+const myComponent = () => (
+
+)
+```
+
+### Loading images with a CORS policy
+
+When loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:
+
+```js
+const myComponent = () => (
+
+)
```
### Animations and other advanced uses
+
A wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final ` {
- return (
-
- {children}
-
- )
+ container={(children) => {
+ return {children}
}}
/>
```
-The `
+ Delayed: {delay} seconds
+ {!maxTimeReached && <>, image should show in: {remainingTime}s}
+
+
+
+ )
+}
+
+function GlobalTimer({until}) {
+ const [startTime] = useState(Date.now())
+ const [elapsedTime, setElapsedTime] = useState(0)
+ const maxTimeReached = elapsedTime / 1000 - 2 > until
+
+ useEffect(() => {
+ if (maxTimeReached) return
+ const timer = setTimeout(() => setElapsedTime(Date.now() - startTime), 1000)
+ return () => clearTimeout(timer)
+ }, [elapsedTime])
+
+ return (
+ +
+
+
+ + )} +
+
+ )
+}
+
+const HooksLegacyExample = ({rand}) => {
+ const {src, isLoading, error} = useImage({
+ srcList: [
+ 'https://www.example.com/non-existant-image.jpg',
+ `/delay/${rand * 1000}/https://picsum.photos/200`, // will be loaded
+ ],
+ useSuspense: false,
+ })
+
+ return (
+ React Image visual tests
+
+ Test will load on page load. For a test to pass, one or more images
+ should show in a green box or the text "✅ test passed" should show.
+ Note that test are delayed by a random amount of time.
+
+ {!maxTimeReached ? (
+ Elapsed seconds: {Math.trunc(elapsedTime / 1000)}
+ ) : ( + <> +Max time elapsed!
+ All images should be loaded at this point ++ + )} +
+
+ 
}
+ {!isLoading && !error && !src && (
+
+ )
+}
+
+const HooksSuspenseExample = ({rand}) => {
+ const {src} = useImage({
+ srcList: [
+ 'https://www.example.com/foo.png',
+ `/delay/${rand * 1000}/https://picsum.photos/200`, // will be loaded
+ ],
+ })
+
+ return (
+ Using hooks Legacy
+Loading...
}
+ {error && Error! {error.msg}
}
+ {src && Nothing to show - thats not good!
+ )}
+
+
+
+ )
+}
+
+const ReuseCache = ({renderId}) => {
+ const src = `https://picsum.photos/200?rand=${renderId}`
+ const [networkCalls, setNetworkCalls] = useState(0)
+
+ useEffect(() => {
+ setTimeout(() => {
+ const entires = performance.getEntriesByName(src)
+ setNetworkCalls(entires.length)
+ }, 1000)
+ })
+
+ return (
+
+
+
+
+
+ Loading... (Suspense fallback)
}>
+ Suspense should reuse cache and only make one network call
+
+ {networkCalls < 1 && ❓ test pending}
+ {networkCalls === 1 && ✅ test passed}
+ {networkCalls > 1 && (
+
+ ❌ test failed. If DevTools is open, ensure "Disable Cache" in the
+ network tab is disabled
+
+ )}
+
+ Network Calls detected: {networkCalls} (expecting just 1)
+ +
+ To test this manually, check the Network Tab in DevTools to ensure the
+ url
+
+ {src} was only called once
+ +
+
+ Change src
+
+
+ {loadedSecondSource === null && ❓ test pending}
+ {loadedSecondSource === true && ✅ test passed}
+ {loadedSecondSource === false && ❌ test failed}
+
+ Src list:
+ {src.map((url, index) => {
+ return (
+
+ {index + 1}.
+ )
+ })}
+ {url}
+ +
+ This test will load an image and then switch sources after 1 second. It
+ should then rerender with the new source. To manually confirm, ensure
+ the loaded image's source is the second item in the Src list
+
+ +
this is the unloader
}
+ />
+
+ )
+}
+
+function App() {
+ const imageOn404 =
+ 'https://i9.ytimg.com/s_p/OLAK5uy_mwasty2cJpgWIpr61CqWRkHIT7LC62u7s/sddefault.jpg?sqp=CJz5ye8Fir7X7AMGCNKz4dEF&rs=AOn4CLC-JNn9jj-oFw94oM574w36xUL1iQ&v=5a3859d2'
+ const tmdbImg =
+ 'https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfask.jpg'
+
+ // http://i.imgur.com/ozEaj1Z.jpg
+ const rand1 = randSeconds(1, 8)
+ const rand2 = randSeconds(2, 10)
+ const rand3 = randSeconds(2, 10)
+ const rand4 = randSeconds(2, 10)
+ const rand5 = randSeconds(2, 10)
+ const [renderId, setRenderId] = useState(Math.random())
+ const [swRegistered, setSwRegistered] = useState(false)
+
+ useLayoutEffect(() => {
+ navigator.serviceWorker.ready.then(() => {
+ setSwRegistered(true)
+ })
+ }, [])
+
+ if (!swRegistered) return Waiting for server...
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ 
Loading...
}
+ unloader={Should show
+❎ test failed
}
+ />
+
+ 
✅ test passed
}
+ />
+ Should not show anything
+
+ 
Loading...
}
+ unloader={Should show unloader
+Loading...✅ test passed
}
+ />
+
+
+
+
+
+ Loading... (Suspense fallback)
}>
+ 
-