Javascript <；img>；标记无法呈现图像

图像源路径使用relative路径，因为它们不以"/"字符开头，例如它们是当前URL路径的源relative.当您在应用程序的根目录中呈现CountryInfo时，(assumed)路径只是"/"，因此PUBLIC目录中的相对路径工作，例如"/public/images/new_0.jpg"，但是当在"/country/:countryId"上呈现CountryInfo时，图像是相对于路径this(例如/public/country/0/images/new_0.jpg")来提供的.

将数据更新为使用absolute路径:

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",
    },
  },
  ...
];

或在渲染时将其附加到图像源字符串:

function CountryInfo() {
  const location = useLocation();
  const countryId = location.state?.data;

  if (countryData) {
    const image1Url = countryData[countryId].images.image1;
    return (
      <div className="">
        <img
          src={`/${image1Url}`}
          alt="country"
          style={{ height: "100vh", width: "100vw" }}
        />
      </div>
    );
  ...

另请注意:由于导航时URL路径中已经使用了country.id，因此在路由状态中传递相同的country.id值实际上没有意义.只需使用路径段来获取传递的国家/地区ID.将路由绘制CountryInfo定义为具有动态路径段，例如path="/country/:countryId".

示例:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/country/:countryId" element={<CountryInfo />} />
        <Route path="/" element={<Pages />} />
      </Routes>
    </BrowserRouter>
  );
}

<div className="row mt-3">
  {firstRowData.map((country) => (
    <div className="col-md-3" key={country.id}>
      <NavLink to={`/country/${country.id}`}>
        { ...Card code... }
      </NavLink>
    </div>
  ))}
</div>

import { useParams } from 'react-router-dom';

function CountryInfo() {
  const countryId = useParams();

  const { image1, name } = countryData[countryId]?.images ?? {};

  if (image1) {
    return (
      <div className="">
        <img
          src={image1}
          alt={name}
          style={{ height: "100vh", width: "100vw" }}
        />
      </div>
    );
  ...