React中如何将state内图片属性作为props传递？图片不显示排查

核心问题 #

父组件传递图片时格式错误，导致子组件无法识别有效的图片路径：

• 父组件state里的img被写成了{cabin}，这会生成一个包含cabin属性的对象（等价于{ cabin: cabin }），而非直接传入图片路径值。
• 子组件将这个对象赋值给img标签的src属性，浏览器无法解析对象作为图片源，自然无法显示图片。

修正方案 #

1. 修改父组件的state #

把img: {cabin}改成直接传入图片变量img: cabin：

state = {
  card: { id: "logCabin", name: "cabin", img: cabin, label: "Log Cabin" },
};

2. 子组件无需改动 #

子组件中解构img并赋值给src的写法是正确的，只要父组件传递的是真实的图片路径值，浏览器就能正常加载图片。

验证：修改后打开浏览器控制台，查看img标签的src属性，会显示编译后的正确图片路径（比如/static/media/cabin.xxxxxx.png），而非[object Object]，此时图片就能正常显示。

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