{"record":{"id":"49d233d2c562467a","repo":"remotion-dev/remotion","slug":"no-src-prop-was-passed-to-canvasimage","errorCode":null,"errorMessage":"No \"src\" prop was passed to <CanvasImage>.","messagePattern":"No \"src\" prop was passed to <CanvasImage>\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/canvas-image/CanvasImage.tsx","lineNumber":554,"sourceCode":"\t\t\tstyleWhilePremounted,\n\t\t\tstyleWhilePostmounted,\n\t\t\thidden,\n\t\t\tname,\n\t\t\tshowInTimeline,\n\t\t\tcropLeft,\n\t\t\tcropRight,\n\t\t\tcropTop,\n\t\t\tcropBottom,\n\t\t\tcontrols,\n\t\t\t_remotionInternalDocumentationLink,\n\t\t\t_remotionInternalCropComponentName,\n\t\t\toutlineRef,\n\t\t\t...canvasProps\n\t\t},\n\t\tref,\n\t) => {\n\t\tif (!src) {\n\t\t\tthrow new Error('No \"src\" prop was passed to <CanvasImage>.');\n\t\t}\n\n\t\tconst memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);\n\t\tconst actualRef = useRef<HTMLCanvasElement | null>(null);\n\t\tuseImperativeHandle(ref, () => {\n\t\t\treturn actualRef.current as HTMLCanvasElement;\n\t\t}, []);\n\t\tconst {\n\t\t\teffectivePostmountFor,\n\t\t\teffectivePremountFor,\n\t\t\tfreezeFrame,\n\t\t\tisPremountingOrPostmounting,\n\t\t\tpostmountingActive,\n\t\t\tpremountingActive,\n\t\t\tpremountingStyle,\n\t\t} = usePremounting({\n\t\t\tfrom: from ?? 0,\n\t\t\tdurationInFrames: durationInFrames ?? Infinity,","sourceCodeStart":536,"sourceCodeEnd":572,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/canvas-image/CanvasImage.tsx#L536-L572","documentation":"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.","triggerScenarios":"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.","commonSituations":"Async image loading where the component mounts before the URL exists; spreading props that omit src; migrating from <Img> and forgetting the src binding.","solutions":["Always pass a string src: <CanvasImage src={staticFile('img.png')} />.","Guard mounting until src exists: {src && <CanvasImage src={src} />}.","If loading async, delayRender until the URL resolves."],"exampleFix":"// before\n<CanvasImage src={data?.url} />\n\n// after\n{data?.url ? <CanvasImage src={data.url} /> : null}","handlingStrategy":"validation","validationCode":"if (typeof src !== 'string' || src.length === 0) {\n  return null; // don't mount <CanvasImage>\n}","typeGuard":"const isValidCanvasSrc = (src: unknown): src is string =>\n  typeof src === 'string' && src.length > 0;","tryCatchPattern":null,"preventionTips":["Type the src prop as `string` and make it required in your wrapper.","Render <CanvasImage> only after the URL is available.","Use delayRender for async image sources."],"tags":["canvas","image","props","validation","react"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}