{"id":11723,"library":"react-image","title":"React Image Component and Hook","description":"React Image is a library providing a robust `` tag replacement and a `useImage` hook for React applications. It focuses on enhancing image loading by supporting multiple image sources for fallback, displaying custom preloader components while images are loading, and gracefully handling image loading errors. The current stable version is 4.1.0, but the package was last published over three years ago, suggesting a maintenance rather than active development cadence. A key differentiator is its internal `useImage` hook, which leverages React Suspense by default for declarative image loading states. It explicitly advises against using it for lazy loading, recommending native browser `loading=\"lazy\"` for that purpose. It allows developers to specify any React element as a loading indicator or an error fallback, providing a more polished user experience than default browser behaviors.","status":"maintenance","version":"4.1.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/mbrevda/react-image","tags":["javascript","reactjs","img","image","loader","fallback","react image","react-image","react img multi","typescript"],"install":[{"cmd":"npm install react-image","lang":"bash","label":"npm"},{"cmd":"yarn add react-image","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-image","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime helper functions for Babel-transformed code.","package":"@babel/runtime","optional":false},{"reason":"Core React library; supports hooks since >=16.8.","package":"react","optional":false},{"reason":"ReactDOM for browser rendering; supports hooks since >=16.8.","package":"react-dom","optional":false}],"imports":[{"note":"The primary component is a named export, not a default export.","wrong":"import Image from 'react-image'","symbol":"Image","correct":"import { Image } from 'react-image'"},{"note":"The `useImage` hook is a named export and integrates with React Suspense by default. CommonJS `require` syntax is generally discouraged in modern React/TypeScript projects.","wrong":"const useImage = require('react-image').useImage","symbol":"useImage","correct":"import { useImage } from 'react-image'"},{"note":"Type import for the component's props, useful for TypeScript projects.","symbol":"ImageProps","correct":"import type { ImageProps } from 'react-image'"}],"quickstart":{"code":"import React, { Suspense } from 'react';\nimport { Image } from 'react-image';\n\nconst PlaceholderComponent: React.FC = () => (\n
\n Loading Image...\n
\n);\n\nconst ErrorFallbackComponent: React.FC = () => (\n
\n Failed to load image.\n
\n);\n\nconst App: React.FC = () => {\n const imageUrls = [\n 'https://picsum.photos/800/600?random=1', // Primary image\n 'https://picsum.photos/600/400?random=2', // Fallback image 1\n 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png' // Fallback image 2\n ];\n\n return (\n
\n

React Image Example

\n

This demonstrates loading an image with a custom placeholder and multiple fallbacks.

\n
\n }>\n }\n alt=\"Random unsplash image\"\n style={{ width: '100%', height: 'auto', display: 'block' }}\n errorFallback={}\n />\n \n
\n

Note: The first valid URL from `srcList` will be used. If all fail, `errorFallback` is shown.

\n
\n );\n};\n\nexport default App;\n","lang":"typescript","description":"This example showcases the `Image` component with a `Suspense` boundary, providing a custom loader and a fallback component if all specified images fail to load. It uses `srcList` for multiple fallback image sources."},"warnings":[{"fix":"Evaluate alternatives if active maintenance and frequent updates are critical for your project.","message":"The package's last publish was over three years ago. While functional, it may not receive frequent updates, bug fixes, or new features, which could be a concern for long-term projects or compatibility with future React versions.","severity":"gotcha","affected_versions":">=4.1.0"},{"fix":"Include an `Object.assign` polyfill (e.g., `es6-object-assign` npm package or Mozilla's polyfill) in your project bundle before `react-image` is loaded.","message":"For older browser environments that do not natively support `Object.assign`, a polyfill is required. Without it, the application may crash with an error like 'Cannot read properties of undefined (reading 'assign')'.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use `` directly for lazy loading purposes instead of `react-image`.","message":"The `react-image` library is not intended for lazy loading images that are off-screen. For performance optimization related to 'lazy loading', it is recommended to use the native HTML `` element with the `loading=\"lazy\"` attribute.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Implement a React Error Boundary component and wrap any components that use `useImage` within it to catch and display image loading errors.","message":"When using the `useImage` hook, if all provided `srcList` URLs fail to load, the hook will throw an error. Components utilizing `useImage` should be wrapped in a React Error Boundary to gracefully handle these failures and display a custom error state.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Set `useSuspense={false}` in the `useImage` hook options or the `Image` component props if you do not want to utilize React Suspense for image loading.","message":"The `useSuspense` prop in `useImage` defaults to `true`, which means the component will suspend rendering until the image is downloaded and decoded. If you are not using React Suspense or want to manage loading states manually, you must explicitly set `useSuspense={false}`.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that at least one URL in `srcList` is valid and accessible, or wrap the component using `useImage` or `Image` in an Error Boundary to catch this exception and display a fallback UI. For example, add ``.","cause":"The `useImage` hook (and implicitly the `Image` component) failed to load any images from the provided `srcList`, and no error boundary is catching the thrown error.","error":"Error: No images were loaded"},{"fix":"Include an `Object.assign` polyfill in your application. For example, `import 'es6-object-assign';` or add a script tag for a polyfill from a CDN.","cause":"The JavaScript environment (browser) does not support `Object.assign`, and no polyfill has been provided. This is common in older browsers like IE.","error":"TypeError: Object.assign is not a function"},{"fix":"Change the import statement to `import { Image } from 'react-image'` to correctly import the named component.","cause":"This error typically occurs when trying to default import `Image` (e.g., `import Image from 'react-image'`) instead of using a named import.","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."}],"ecosystem":"npm"}