React中从public文件夹向卡片组件插入图片的方法及异常修复

针对你遇到的卡片图片不显示问题，以下是几个可行的修复方案：

1. 修正路径中的多余斜杠 #

观察你的itemsList数组，第一个元素的imgurl末尾多了一个斜杠：

{id: 1, name: "An apartment in San-Francisco", imgurl: "/imgs/apartments/pexels-vecislavas-popa-1571460.jpg/", price: 20000}

这个多余的斜杠会导致浏览器请求错误的资源路径，将其修改为：

{id: 1, name: "An apartment in San-Francisco", imgurl: "/imgs/apartments/pexels-vecislavas-popa-1571460.jpg", price: 20000}

2. 验证Public文件夹的目录结构 #

确保你的项目public文件夹下的目录层级完全匹配代码中的路径：

public/
└── imgs/
    └── apartments/
        ├── pexels-vecislavas-popa-1571460.jpg
        ├── pexels-pixabay-276724.jpg
        ├── pexels-pixabay-271624.jpg
        ├── pexels-curtis-adams-5008389.jpg
        ├── pexels-curtis-adams-8583638.jpg
        └── pexels-ron-lach-10397920.jpg

同时检查文件名的大小写和扩展名是否与代码完全一致（比如.jpg不能写成.JPG，部分操作系统/服务器区分大小写）。

3. 使用process.env.PUBLIC_URL确保路径可靠性 #

React提供了process.env.PUBLIC_URL环境变量，用来准确定位public文件夹的根路径，避免部署时出现路径偏差。修改CardItemComponent中的图片src：

<Card.Img variant="top" src={`${process.env.PUBLIC_URL}${props.card.imgurl}`}/>

注意保持imgurl开头的斜杠（比如/imgs/apartments/xxx.jpg），这样拼接后的路径才会正确。

4. 检查图片文件是否损坏 #

直接在浏览器地址栏输入图片的完整访问路径（比如http://localhost:3000/imgs/apartments/pexels-pixabay-276724.jpg），如果无法加载，说明图片文件本身可能损坏，重新替换或下载对应的图片文件即可。

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