necolas/react-native-web · error · Error
Image: asset with ID "${source}" could not be found. Please
Error message
Image: asset with ID "${source}" could not be found. Please check the image source or packager. What it means
react-native-web's Image resolves numeric sources (require('./img.png') style asset IDs) via getAssetByID, the asset registry populated by the Metro/Haste packager at build time. On web, if a number is passed but no asset with that ID exists in the registry, resolveAssetUri throws because it cannot map the ID to a URI. This indicates the bundler never registered the asset for that module ID.
Source
Thrown at packages/react-native-web/src/exports/Image/index.js:126
const { height, width } = getAssetByID(source);
return { height, width };
} else if (
source != null &&
!Array.isArray(source) &&
typeof source === 'object'
) {
const { height, width } = source;
return { height, width };
}
}
function resolveAssetUri(source): ?string {
let uri = null;
if (typeof source === 'number') {
// get the URI from the packager
const asset = getAssetByID(source);
if (asset == null) {
throw new Error(
`Image: asset with ID "${source}" could not be found. Please check the image source or packager.`
);
}
let scale = asset.scales[0];
if (asset.scales.length > 1) {
const preferredScale = PixelRatio.get();
// Get the scale which is closest to the preferred scale
scale = asset.scales.reduce((prev, curr) =>
Math.abs(curr - preferredScale) < Math.abs(prev - preferredScale)
? curr
: prev
);
}
const scaleSuffix = scale !== 1 ? `@${scale}x` : '';
uri = asset
? `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}`
: '';
} else if (typeof source === 'string') {View on GitHub (pinned to a9de220ba9)
Solutions
- Use require('./image.png') or import at the call site instead of a literal number so the packager registers the asset and injects the registry.
- Rebuild/rebundle the app so the asset registry matches the current asset module IDs.
- If using a custom bundler, ensure the asset registry plugin (getAssetByID data) is included.
- Prefer a remote URI string ({ uri: 'https://...' }) if no local asset is intended.
Example fix
// before
<Image source={4} />
// after
import img from './assets/logo.png';
<Image source={img} /> Defensive patterns
Strategy: validation
Validate before calling
import { Image } from 'react-native';
import { getAssetByID } from 'react-native-web/dist/modules/AssetRegistry';
function isValidImageSource(src) {
if (typeof src === 'number') return getAssetByID(src) != null;
if (typeof src === 'object' && src !== null) return typeof src.uri === 'string';
return typeof src === 'string' && src.length > 0;
}
if (!isValidImageSource(source)) throw new Error('Unresolvable image source: ' + source); Type guard
const isNumericAssetSource = (s) => typeof s === 'number' && getAssetByID(s) != null;
Try / catch
try { render(<Image source={src} />); } catch (e) { if (/could not be found/.test(e.message)) logAssetError(src); throw e; } Prevention
- Always use require()/import for local assets, never raw numeric IDs
- Never persist or copy asset IDs between builds — they are not stable
- Ensure your bundler injects the asset registry when compiling RN code for web
When it happens
Trigger: Passing a raw numeric asset ID as the Image source (e.g. <Image source={12345} />) when getAssetByID(source) returns null/undefined — the ID is not in the asset registry.
Common situations: Hard-coding an asset ID copied from another build/environment (IDs are not stable across builds); requiring images in code compiled by a packager that doesn't inject the asset registry (e.g. webpack/vite without an RN asset plugin); stale builds after assets were added or removed; deep-linking or persisting numeric source values.
Related errors
- The <Image> component cannot contain children. If you want t
- Invalid CSS keyframes type: ${typeof keyframesValue}
- StyleSheet.compose() only accepts 2 arguments, received ${le
- Unrecognized signal `${signal}` or state `${curState}` for T
- Touchable cannot transition from `${curState}` to `${signal}
AI-assisted analysis of necolas/react-native-web@a9de220ba9 (2026-09-01).
Data as JSON: /api/errors/a26220daaa8a2262.
Report an issue: GitHub.