remotion-dev/remotion · error · Error

No "src" prop was passed to <Img>.

Error message

No "src" prop was passed to <Img>.

What it means

Thrown by the NativeImgInner component (the path <Img> takes when no `effects` prop is passed) when `src` is falsy. <Img> always requires a `src` because it is responsible for suspending rendering until the image is decoded; an undefined src would silently produce a blank frame. This is the validation guard at the top of the native-rendering branch of <Img>.

Source

Thrown at packages/core/src/Img.tsx:376

	from,
	trimBefore,
	durationInFrames,
	freeze,
	premountFor,
	postmountFor,
	style,
	styleWhilePremounted,
	styleWhilePostmounted,
	cropLeft,
	cropRight,
	cropTop,
	cropBottom,
	controls,
	outlineRef: refForOutline,
	...props
}) => {
	if (!src) {
		throw new Error('No "src" prop was passed to <Img>.');
	}

	const {
		effectivePostmountFor,
		effectivePremountFor,
		freezeFrame,
		isPremountingOrPostmounting,
		postmountingActive,
		premountingActive,
		premountingStyle,
	} = usePremounting({
		from: from ?? 0,
		durationInFrames: durationInFrames ?? Infinity,
		premountFor: premountFor ?? null,
		postmountFor: postmountFor ?? null,
		style: style ?? null,
		styleWhilePremounted: styleWhilePremounted ?? null,
		styleWhilePostmounted: styleWhilePostmounted ?? null,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Always pass a valid `src` string URL to <Img>.
2. Defer rendering: `{url && <Img src={url} />}` so the component never mounts without src.
3. Provide a placeholder image URL as a fallback.
4. Validate upstream data sources to ensure the src field is non-empty before passing to <Img>.

Example fix

// before
{props.image && <Img alt={props.image.alt} />}
// after
{props.image?.url && <Img src={props.image.url} alt={props.image.alt} />}

if (typeof src !== 'string' || src.length === 0) {
  throw new Error(`Missing <Img> src`);
}
return <Img src={src} />;

const isNonEmptyString = (v: unknown): v is string =>
  typeof v === 'string' && v.trim().length > 0;

When it happens

Trigger: Rendering `<Img />` without a src prop; passing `src={undefined}` while a value loads; destructuring an object that lacks the src field; passing src from a state variable that is initialized to undefined.

Common situations: Loading images from props where the field is optional; CMS data where the URL field can be empty; conditional rendering forgotten when the asset is missing.

Related errors

• The "width" and "height" props must be numbers on <Img> when
• The ${formatPropList(conflictingProps)} prop${conflictingPro
• No 'src' was passed to <Html5Audio>.
• Emoji ${emoji} not found. Available emojis: ${emojis.map((e)
• No id for composition passed.

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/bc1657ba503308dd. Report an issue: GitHub.