Material-UI v4 CardMedia组件必填属性报错及图片渲染异常问题咨询

报错触发根因 #

1. 你使用的@material-ui/core 4.12.3版本存在CardMedia组件PropType校验的已知缺陷：校验逻辑没有正确识别传入的image prop，因此误触发了「必须传入children、image、src、component其中一个prop」的类型警告。
2. 你添加component="img"后报错消失但图片无法显示的原因：当显式指定渲染组件为img标签时，CardMedia会优先读取src prop作为图片资源地址，你代码中传入的是image而非src，导致生成的img标签src属性为空，自然无法加载图片。
3. 不添加component属性时功能正常的原因：未指定component的情况下，CardMedia默认渲染为div标签，此时会自动把image prop的值设置为div的backgroundImage样式，图片可以正常通过背景图渲染，只是PropType校验误报了警告，不影响实际运行。

可选修复方案 #

• 直接忽略该警告：仅为校验逻辑bug，不影响实际功能运行
• 调整prop适配img组件：保留component="img"属性，同时将代码中的image={post.selectedFile}修改为src={post.selectedFile}，即可同时消除警告和正常显示图片
• 显式指定默认渲染组件：给CardMedia添加component="div"属性，即可触发image prop的正确识别，消除校验警告

内容的提问来源于stack exchange，提问作者Mohammed ziou