React组件HomepageServices跨父组件渲染时图片无法显示问题

问题原因 #

你使用了相对路径声明图片资源地址，浏览器会根据当前页面的路由路径拼接完整资源地址：

• 当组件在根路径（/）对应的Homepage组件中渲染时，拼接出的图片地址为站点域名/img/home/xxx.png，匹配public目录下的文件结构，可正常加载
• 当组件在子路径（比如/service/xxx）对应的其他父组件中渲染时，拼接出的图片地址为站点域名/service/xxx/img/home/xxx.png，路径不存在导致加载失败

解决方案 #

可任选以下任意一种方案修复：

1. 改用绝对路径声明图片地址
   在所有图片路径开头添加斜杠，直接从站点根目录寻址：

<img src="/img/home/home-icon-1.png" alt="home" />

2. 导入图片作为静态资源使用
   在组件顶部引入对应图片，打包工具会自动处理正确路径：

// 路径根据你的项目实际文件结构调整
import homeIcon1 from "../../public/img/home/home-icon-1.png";
import homeIcon2 from "../../public/img/home/home-icon-2.png";
import homeIcon3 from "../../public/img/home/home-icon-3.png";

// 组件内使用
<img src={homeIcon1} alt="home" />

3. 适配站点子目录部署场景
   如果项目部署在域名子目录下，可以用脚手架提供的公共路径变量拼接地址：

• Create React App 项目：

<img src={`${process.env.PUBLIC_URL}/img/home/home-icon-1.png`} alt="home" />

• Vite 项目：

<img src={`${import.meta.env.BASE_URL}/img/home/home-icon-1.png`} alt="home" />

补充检查 #

确认你的img文件夹存放在项目的public目录下，如果存放在src目录内，必须使用第二种导入静态资源的方式才能正常加载。

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