{"record":{"id":"4cef0d592a3fee70","repo":"remotion-dev/remotion","slug":"the-width-and-height-props-must-be-numbers-on","errorCode":null,"errorMessage":"The \"width\" and \"height\" props must be numbers on <Img> when effects are passed, because <Img> renders a <CanvasImage>. Use numeric props or CSS dimensions in \"style\".","messagePattern":"The \"width\" and \"height\" props must be numbers on <Img> when effects are passed, because <Img> renders a <CanvasImage>\\. Use numeric props or CSS dimensions in \"style\"\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/Img.tsx","lineNumber":496,"sourceCode":"\t);\n\nconst formatPropList = (props: string[]) => {\n\treturn props.map((prop) => `\"${prop}\"`).join(', ');\n};\n\nconst validateCanvasImageFallbackProps = ({\n\tprops,\n\tref,\n\twidth,\n\theight,\n}: {\n\treadonly props: Record<string, unknown>;\n\treadonly ref: React.Ref<HTMLImageElement> | undefined;\n\treadonly width: ImgProps['width'];\n\treadonly height: ImgProps['height'];\n}) => {\n\tif (typeof width === 'string' || typeof height === 'string') {\n\t\tthrow new Error(\n\t\t\t'The \"width\" and \"height\" props must be numbers on <Img> when effects are passed, because <Img> renders a <CanvasImage>. Use numeric props or CSS dimensions in \"style\".',\n\t\t);\n\t}\n\n\tconst conflictingProps = getIncompatiblePropNames(props);\n\tif (ref !== null && ref !== undefined) {\n\t\tconflictingProps.unshift('ref');\n\t}\n\n\tif (conflictingProps.length === 0) {\n\t\treturn;\n\t}\n\n\tthrow new Error(\n\t\t`The ${formatPropList(conflictingProps)} prop${\n\t\t\tconflictingProps.length === 1 ? '' : 's'\n\t\t} cannot be used on <Img> when effects are passed, because <Img> renders a <canvas> instead of a native <img>. Remove ${\n\t\t\tconflictingProps.length === 1 ? 'this prop' : 'these props'","sourceCodeStart":478,"sourceCodeEnd":514,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/Img.tsx#L478-L514","documentation":"Thrown by validateCanvasImageFallbackProps when `effects` are passed to <Img> and `width` or `height` is a string. With effects, <Img> renders a <CanvasImage> (a real canvas) whose backing store requires numeric pixel dimensions; string CSS values like '100%' or 'auto' cannot be allocated. The message directs you to use the numeric props for canvas sizing or move CSS sizing into `style`.","triggerScenarios":"Passing `effects` plus `width=\"1920\"` or `width=\"100%\"` on <Img>; using the same props you would for a CSS-sized <img> when effects are active.","commonSituations":"Adding an effect to an existing <Img> that previously used string dimensions; sharing a props object between canvas and non-canvas image usages.","solutions":["Switch to numeric props: `width={1920} height={1080}` when using effects.","Move CSS sizing into `style={{ width: '100%', height: 'auto' }}` while keeping numeric width/height props for the canvas.","If you need CSS-only sizing, drop the `effects` prop to fall back to a native <img>.","Type your wrapper component so width/height are `number` when effects are present."],"exampleFix":"// before\n<Img src={url} width=\"100%\" height=\"auto\" effects={[blur]} />\n// after\n<Img src={url} width={1920} height={1080} style={{width: '100%', height: 'auto'}} effects={[blur]} />","handlingStrategy":"type-guard","validationCode":"if (effects.length > 0 && (typeof width === 'string' || typeof height === 'string')) {\n  throw new TypeError('Use numeric width/height (or style) when passing effects to <Img>');\n}","typeGuard":"const isNumericDimensions = (\n  w: string | number | undefined,\n  h: string | number | undefined,\n): boolean => typeof w !== 'string' && typeof h !== 'string';","tryCatchPattern":null,"preventionTips":["Type Img-with-effects wrappers so width/height are `number`.","Move CSS sizing into `style` when using effects.","Drop `effects` if you need CSS-only string sizing.","Add a unit test asserting effects + numeric dims render successfully."],"tags":["img","canvas-image","effects","props","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}