remotion-dev/remotion · error

No "src" prop was passed to

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.

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

• animationData should be provided as an object. If you only…
• "hueShift" must be a finite number, but got
• "seed" must be a finite number, but got
• : `pixelDensity` must be a positive finite number…
• The <Freeze /> component requires a 'frame' prop, but none…

AI-assisted analysis of remotion-dev/remotion@46a3a6bf13 (2026-09-18). Data as JSON: /api/errors/49d233d2c562467a. Report an issue: GitHub.

Appendix: source

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

			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 isMedia = useMemo(
			() => ({
				type: 'image' as const,
				src,
			}),
			[src],
		);

		const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
		const actualRef = useRef<HTMLCanvasElement | null>(null);
		useImperativeHandle(ref, () => {
			return actualRef.current as HTMLCanvasElement;
		}, []);
		const {
			effectivePostmountFor,
			effectivePremountFor,

View on GitHub (pinned to 46a3a6bf13)