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

  1. 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.
  2. Rebuild/rebundle the app so the asset registry matches the current asset module IDs.
  3. If using a custom bundler, ensure the asset registry plugin (getAssetByID data) is included.
  4. 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

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


AI-assisted analysis of necolas/react-native-web@a9de220ba9 (2026-09-01). Data as JSON: /api/errors/a26220daaa8a2262. Report an issue: GitHub.