组件通过Props接收本地图片URL时如何正确指定路径？

针对你遇到的Card组件因路径问题无法加载本地图片的情况，以下是几种实用解决方案：

方案1：父组件传入完整相对路径 #

直接在调用Card组件的父组件中，传入包含正确相对前缀的图片路径，Card组件无需额外处理：

// 父组件示例（如App.js）
import Card from './components/Card';

function App() {
  return (
    <Card img="../images/your-image.jpg" />
  );
}

// Card组件保持原逻辑即可
export default function Card(props) {
  return (
    <div className="card">
      <img src={props.img} className="card--image" alt="" />
    </div>
  );
}

方案2：Card组件内部统一拼接路径前缀 #

如果所有图片都存放在固定目录（如../images/），可以在Card组件内部统一拼接路径前缀，父组件只需传入图片文件名：

// Card组件
export default function Card(props) {
  const fullImagePath = `../images/${props.img}`;
  return (
    <div className="card">
      <img src={fullImagePath} className="card--image" alt="" />
    </div>
  );
}

// 父组件调用示例
<Card img="your-image.jpg" />

方案3：基于项目根目录的绝对路径（适用于脚手架项目） #

如果使用Create React App等脚手架，可将图片放在public/images/目录下，直接使用根路径前缀/images/，无需考虑组件层级：

// Card组件
export default function Card(props) {
  return (
    <div className="card">
      <img src={`/images/${props.img}`} className="card--image" alt="" />
    </div>
  );
}

// 父组件调用示例
<Card img="your-image.jpg" />

方案4：导入图片模块（推荐） #

这是React项目中最规范的做法，Webpack会自动处理图片路径，彻底避免手动拼接的错误：

// 父组件中导入图片
import myImage from '../images/your-image.jpg';

// 将导入的图片对象传入Card组件
<Card img={myImage} />

// Card组件直接使用传入的图片对象
export default function Card(props) {
  return (
    <div className="card">
      <img src={props.img} className="card--image" alt="" />
    </div>
  );
}

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