React本地服务器（WSL Ubuntu）无法显示图片问题求助

React项目（基于Webpack构建，比如Create React App）中，动态拼接的图片路径不会被Webpack处理，而你手动import的图片会被Webpack解析为正确的静态资源地址（或base64编码），这就是为什么star.png能加载，而props传入的图片路径失效的原因。

这里提供三种可行的解决方法，按需选择：

方法1：在父组件中导入图片并传递给子组件 #

在App.js中提前导入需要的图片，将导入后的资源变量作为props传给Card组件：

import React from "react";
import Navbar from "./components/navbar";
import Hero from "./components/hero";
import Card from "./components/card";
// 提前导入图片
import zeferesImg from "./images/zeferes.png";

export default function App() {
  return (
    <div>
      <Navbar />
      <Card
        img={zeferesImg}
        rating="5.0"
        reviewCount={6}
        country="USA"
        title="Playing on the beach with me."
        price={136}
      />
    </div>
  );
}

然后修改Card组件，直接使用传入的资源变量：

import React from "react";
import star from "../images/star.png";

export default function Card(props) {
  return (
    <div className="card">
      <div className="card--image">
        <h3 className="card--availability">SOLD OUT</h3>
        {/* 直接使用props.img */}
        <img src={props.img} alt="card image"></img>
      </div>
      {/* 其他代码保持不变 */}
      <div className="card--rating">
        <img src={star}></img>
        <p className="card--dark-text">{props.rating}</p>
        <p className="card--light-text">
          ({props.reviewCount}) &middot; {props.country}
        </p>
      </div>
      <p className="card--desc">{props.title}</p>
      <div className="card--price">
        <h5>From ${props.price}</h5>
      </div>
    </div>
  );
}

方法2：将图片放到public目录下，使用绝对路径 #

如果你的项目有public目录（Create React App默认生成），把图片放到public/images/目录下，然后在Card组件中使用绝对路径引用：

// Card组件中修改img的src
<img src={`/images/${props.img}`} alt="card image"></img>

这种方式不需要导入图片，Webpack会直接保留绝对路径，运行时从public目录加载资源。

方法3：创建图片映射表（适合多图片场景） #

如果需要加载大量图片，可以提前创建一个映射对象，把所有图片导入后和文件名绑定，然后在组件中根据props的文件名匹配：

import React from "react";
import star from "../images/star.png";
// 导入所有需要用到的图片
import zeferes from "../images/zeferes.png";
import otherImg from "../images/other.png";

// 创建图片映射表
const imageMap = {
  "zeferes.png": zeferes,
  "other.png": otherImg
};

export default function Card(props) {
  return (
    <div className="card">
      <div className="card--image">
        <h3 className="card--availability">SOLD OUT</h3>
        {/* 通过映射表获取图片资源 */}
        <img src={imageMap[props.img]} alt="card image"></img>
      </div>
      {/* 其他代码保持不变 */}
      <div className="card--rating">
        <img src={star}></img>
        <p className="card--dark-text">{props.rating}</p>
        <p className="card--light-text">
          ({props.reviewCount}) &middot; {props.country}
        </p>
      </div>
      <p className="card--desc">{props.title}</p>
      <div className="card--price">
        <h5>From ${props.price}</h5>
      </div>
    </div>
  );
}

你尝试的关闭广告拦截器、修改文件权限、关闭源映射等操作，都没有触及问题本质——这不是权限或拦截问题，而是Webpack对静态资源的处理机制导致的：Webpack只能识别静态的import语句来处理资源，动态拼接的路径无法被解析，打包后路径会变成相对于最终HTML文件的错误地址，导致图片加载失败。

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