React中NavLink跳转后img标签无法渲染图片的问题

核心原因：相对路径解析错误 #

当通过NavLink跳转到/country/${country.id}这类嵌套路由时，页面URL层级变为二级路径（比如/country/0）。此时img标签的src使用相对路径images/new_0.jpg，浏览器会将其解析为/country/images/new_0.jpg，但你的图片实际存放在根目录的/images文件夹下，导致资源找不到。

而直接在App.js中调用CountryInfo时，页面URL是根路径（/），相对路径会被正确解析为/images/new_0.jpg，因此图片能正常显示。

解决办法 #

1. 修改为绝对路径 #

直接在图片路径前添加/，确保从根目录开始查找资源：
修改data.jsx中的路径：

const data = [
  {
    id: 0,
    name: "Singapore",
    url: "/images/card_singapore.jpg",
    price: "$ 300",
    day: 5,
    images: {
      image1: "/images/new_0.jpg",
      image2: "/images/new_1.jpg",
      image3: "/images/new_2.jpg",
      image4: "/images/new_3.jpg",
    },
  },
  // 其他数据...
];

2. 使用Create React App的PUBLIC_URL（推荐） #

如果是Create React App构建的项目，用process.env.PUBLIC_URL适配不同部署环境：
修改CountryInfo.jsx中img的src：

<img
  src={`${process.env.PUBLIC_URL}/${image1Url}`}
  alt={countryData[countryId].name}
  style={{ height: "100vh", width: "100vw" }}
/>

同时保持data.jsx中的路径为相对public文件夹的格式，比如images/new_0.jpg即可。

3. 调整路由相对路径配置 #

在NavLink中添加relative="path"属性，让路由跳转时保持路径解析的一致性：

<NavLink
  to={`/country/${country.id}`}
  state={{ data: country.id }}
  relative="path"
>
  {/* Card code */}
</NavLink>

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