{"record":{"id":"9858839b7f0c520e","repo":"vercel/next.js","slug":"image-with-src-src-has-both-height-and-fil","errorCode":null,"errorMessage":"Image with src \"${src}\" has both \"height\" and \"fill\" properties. Only one should be used.","messagePattern":"Image with src \"(.+?)\" has both \"height\" and \"fill\" properties\\. Only one should be used\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/next/src/shared/lib/get-img-props.ts","lineNumber":488,"sourceCode":"    - Remove \\`{ output: 'export' }\\` and run \"next start\" to run server mode including the Image Optimization API.\n    - Configure \\`{ images: { unoptimized: true } }\\` in \\`next.config.js\\` to disable the Image Optimization API.\n  Read more: https://nextjs.org/docs/messages/export-image-api`\n      )\n    }\n    if (!src) {\n      // React doesn't show the stack trace and there's\n      // no `src` to help identify which image, so we\n      // instead console.error(ref) during mount.\n      unoptimized = true\n    } else {\n      if (fill) {\n        if (width) {\n          throw new Error(\n            `Image with src \"${src}\" has both \"width\" and \"fill\" properties. Only one should be used.`\n          )\n        }\n        if (height) {\n          throw new Error(\n            `Image with src \"${src}\" has both \"height\" and \"fill\" properties. Only one should be used.`\n          )\n        }\n        if (style?.position && style.position !== 'absolute') {\n          throw new Error(\n            `Image with src \"${src}\" has both \"fill\" and \"style.position\" properties. Images with \"fill\" always use position absolute - it cannot be modified.`\n          )\n        }\n        if (style?.width && style.width !== '100%') {\n          throw new Error(\n            `Image with src \"${src}\" has both \"fill\" and \"style.width\" properties. Images with \"fill\" always use width 100% - it cannot be modified.`\n          )\n        }\n        if (style?.height && style.height !== '100%') {\n          throw new Error(\n            `Image with src \"${src}\" has both \"fill\" and \"style.height\" properties. Images with \"fill\" always use height 100% - it cannot be modified.`\n          )\n        }","sourceCodeStart":470,"sourceCodeEnd":506,"githubUrl":"https://github.com/vercel/next.js/blob/0eb377541648e63402a47b38fee00a8d0ce8f8f1/packages/next/src/shared/lib/get-img-props.ts#L470-L506","documentation":"Props validation in getImgProps for next/image: the fill layout was combined with an explicit height prop. fill makes the image absolutely positioned and sized by its container, so explicit dimensions are contradictory and one of the two must be removed.","triggerScenarios":"next/image receives both height and fill props.","commonSituations":"An Image with fill also sets height; use one or the other.","solutions":["Remove either height or fill from the Image props."],"exampleFix":null,"handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":[],"tags":[],"backgroundTag":null,"analyzedSha":"0eb377541648e63402a47b38fee00a8d0ce8f8f1","analyzedAt":"2026-08-19T02:10:13.922Z","contentChangedAt":"2026-08-19T02:10:13.922Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}