{"record":{"id":"8dcd778d268d30aa","repo":"mui/material-ui","slug":"mui-the-card-image-for-the-blog-post-slug-is","errorCode":null,"errorMessage":"MUI: the card image for the blog post \"${slug}\" is missing.\\nAdd a docs/public/static/blog/${slug}/card.png file and then restart Next.js or else remove card: true from the headers.","messagePattern":"MUI: the card image for the blog post \"(.+?)\" is missing\\.\\\\nAdd a docs/public/static/blog/(.+?)/card\\.png file and then restart Next\\.js or else remove card: true from the headers\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages-internal/markdown/prepareMarkdown.mjs","lineNumber":270,"sourceCode":"      );\n      docs[userLanguage] = {\n        description,\n        location,\n        rendered,\n        toc,\n        title,\n        headers,\n      };\n    });\n\n  if (docs.en.headers.card === 'true') {\n    const slug = docs.en.location.replace(/(.*)\\/(.*)\\.md/, '$2');\n    const exists = fs.existsSync(\n      path.resolve(config.options.workspaceRoot, `docs/public/static/blog/${slug}/card.png`),\n    );\n\n    if (!exists) {\n      throw new Error(\n        [\n          `MUI: the card image for the blog post \"${slug}\" is missing.`,\n          `Add a docs/public/static/blog/${slug}/card.png file and then restart Next.js or else remove card: true from the headers.`,\n        ].join('\\n'),\n      );\n    }\n  }\n\n  return { docs };\n}\n\nexport default prepareMarkdown;\n","sourceCodeStart":252,"sourceCodeEnd":283,"githubUrl":"https://github.com/mui/material-ui/blob/bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5/packages-internal/markdown/prepareMarkdown.mjs#L252-L283","documentation":"prepareMarkdown checks that any blog post declaring `card: true` in its frontmatter has a matching card.png at docs/public/static/blog/<slug>/card.png. The card image is used for blog listing previews; missing it would render a broken preview, so the build fails fast. The message tells you to either add the image or remove the `card: true` header.","triggerScenarios":"Adding `card: true` to a blog post's frontmatter without committing the corresponding card.png; renaming a blog post slug after adding the card so the path no longer matches.","commonSituations":"New blog post draft that enables the card before the design team produced the image; slug renamed late in the process.","solutions":["Add docs/public/static/blog/<slug>/card.png with the card artwork (use the exact slug derived from the markdown filename).","Or remove `card: true` from the post's frontmatter headers to disable the card preview.","Restart the Next.js docs server (`pnpm docs:dev`) after adding the file so the static asset is picked up."],"exampleFix":"---\ntitle: My Post\ncard: true\n---\n// option A: add the file docs/public/static/blog/my-post/card.png\n// option B (after)\n---\ntitle: My Post\n---","handlingStrategy":"validation","validationCode":"import fs from 'fs';\nimport path from 'path';\nfunction cardAssetExists(workspaceRoot, slug) {\n  return fs.existsSync(path.resolve(workspaceRoot, `docs/public/static/blog/${slug}/card.png`));\n}\nif (headers.card === 'true' && !cardAssetExists(workspaceRoot, slug)) {\n  throw new Error('card.png missing — add it or remove card: true');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Only set `card: true` once card.png is committed.","Add a pre-commit hook that checks card.png presence when card:true is set.","Restart the docs dev server after adding static assets."],"tags":["docs-infra","blog","build","assets","validation"],"backgroundTag":null,"analyzedSha":"bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5","analyzedAt":"2026-08-12T22:59:56.717Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}