create-react-app项目中reactstrap的CardImg无法渲染图片求助

• 排查路径基础问题
  你使用的dishes数据集内的image字段默认为项目静态资源相对路径，格式多为/assets/images/xxx.png，首先可以在渲染组件的逻辑中加入console.log(dish.image)，打印出实际传入CardImg的路径值，确认路径格式是否符合预期。如果路径前缺少开头的/，会被解析为相对当前页面路由的路径，也会导致404，可手动补充根路径标识/。

• 调整静态资源存放位置
  如果打印出的路径是根目录相对路径，将你的assets图片文件夹整体移动到项目的public目录下即可，Create React App 会自动解析public目录下的静态资源，直接通过路径访问即可。
  对应目录结构参考：

你的项目名/
├─ public/
│  ├─ assets/
│  │  └─ images/
│  │     ├─ uthappizza.png
│  │     ├─ zucchipakoda.png
│  │     └─ 其他所有菜品图片
└─ src/
   └─ 你的组件代码

• 改用导入方式引入图片
  如果你不想将图片放在public目录，可先将所有菜品图片导入组件，再赋值给对应dish的image字段，代码示例如下：

// 组件顶部导入所需图片
import Uthappizza from '../assets/images/uthappizza.png';
import Zucchipakoda from '../assets/images/zucchipakoda.png';
// 其他菜品图片同理导入

// 调整dishes数据的image字段为导入的变量
const dishes = [
  {
    id: 0,
    name: 'Uthappizza',
    image: Uthappizza,
    description: '...'
    // 其余字段保持不变
  }
]

// 原有Card渲染逻辑不需要修改
<Card>
  <CardImg top src={dish.image} alt={dish.name} />
  <CardBody>
    <CardTitle>{dish.name}</CardTitle>
    <CardText>{dish.description}</CardText>
  </CardBody>
</Card>

• 网络请求排查
  如果完成上述操作后仍无法加载，打开浏览器开发者工具的「网络」标签，刷新页面后过滤img请求，查看对应图片的请求状态：
  • 若为404，再次核对路径是否和实际存放位置一致
  • 若为跨域错误，可将图片转存到本地项目后再按上述方法引入即可

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