remotion-dev/remotion · error · Error

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

Error message

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

What it means

CanvasImage renders into an HTMLCanvasElement and needs a src (an image URL or static import) to load the source bitmap it draws. Without src there is nothing to paint, so the component throws at the top of its render function rather than rendering an empty or broken canvas.

Source

Thrown at packages/core/src/canvas-image/CanvasImage.tsx:554

			styleWhilePremounted,
			styleWhilePostmounted,
			hidden,
			name,
			showInTimeline,
			cropLeft,
			cropRight,
			cropTop,
			cropBottom,
			controls,
			_remotionInternalDocumentationLink,
			_remotionInternalCropComponentName,
			outlineRef,
			...canvasProps
		},
		ref,
	) => {
		if (!src) {
			throw new Error('No "src" prop was passed to <CanvasImage>.');
		}

		const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
		const actualRef = useRef<HTMLCanvasElement | null>(null);
		useImperativeHandle(ref, () => {
			return actualRef.current as HTMLCanvasElement;
		}, []);
		const {
			effectivePostmountFor,
			effectivePremountFor,
			freezeFrame,
			isPremountingOrPostmounting,
			postmountingActive,
			premountingActive,
			premountingStyle,
		} = usePremounting({
			from: from ?? 0,
			durationInFrames: durationInFrames ?? Infinity,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Always pass a string src: <CanvasImage src={staticFile('img.png')} />.
2. Guard mounting until src exists: {src && <CanvasImage src={src} />}.
3. If loading async, delayRender until the URL resolves.

Example fix

// before
<CanvasImage src={data?.url} />

// after
{data?.url ? <CanvasImage src={data.url} /> : null}

if (typeof src !== 'string' || src.length === 0) {
  return null; // don't mount <CanvasImage>
}

const isValidCanvasSrc = (src: unknown): src is string =>
  typeof src === 'string' && src.length > 0;

When it happens

Trigger: Rendering <CanvasImage /> with no src, <CanvasImage src={undefined} />, or a src that is null/empty. Often caused by conditional data not yet loaded or a forgotten prop.

Common situations: Async image loading where the component mounts before the URL exists; spreading props that omit src; migrating from <Img> and forgetting the src binding.

Related errors

• The "freeze" prop is not supported on <Html5Audio />. Use <S
• <Solid>: `pixelDensity` must be a positive finite number. Re
• The <Freeze /> component requires a 'frame' prop, but none w
• "seed" must be a finite number, but got ${JSON.stringify(see
• "hueShift" must be a finite number, but got ${JSON.stringify

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