React使用Props加载本地图片失败，求可行解决方案

问题根源 #

React项目中本地图片会被webpack打包处理，直接用字符串拼接的相对路径（../image/${props.img}）无法被正确解析——打包后图片的实际路径会发生变化，而webpack无法静态分析这种动态拼接的路径。

具体解决方法 #

方法一：父组件提前导入图片，传递资源对象（最可靠）

修改App.js，提前导入目标图片，将图片资源对象直接传给Card组件：

import React from "react"
import Navbar from "./Airbnb/Navbar"
import Hero from "./Airbnb/Hero"
import Card from "./Airbnb/Card"
// 提前导入图片，路径需和实际文件结构匹配
import SwimmerImg from "./Airbnb/image/swimer.png"

export default function App() {
    return (
        <div>
            <Navbar />
            <Hero/>
            <Card 
            img={SwimmerImg} // 传递导入的图片对象
            rating="5.0"
            reviewCount={6}
            country="USA"
            title="Life Lessons with Katie Zaferes"
            price={136}
            />
        </div>
    )
}

修改Card.js中的图片标签：

<img src={props.img} className="card--image" alt="swimmer" />

webpack会自动处理图片的打包路径，导入的图片对象直接对应正确的资源URL。

方法二：Card组件中使用动态require加载（需符合webpack静态解析规则）

修改Card.js中的图片标签：

// 基础路径必须是静态字符串，仅文件名动态
<img src={require(`../image/${props.img}`)} className="card--image" alt="swimmer" />
// webpack 5+版本可能需要加.default
// <img src={require(`../image/${props.img}`).default} className="card--image" alt="swimmer" />

注意：确保props.img的文件名完全正确（包括大小写、后缀），比如确认实际图片文件是swimer.png而非拼写错误的swimmer.png。

方法三：将图片放到public目录，用绝对路径访问

把image文件夹移到项目根目录的public文件夹下（无则新建），修改Card.js中的图片标签：

<img src={`/image/${props.img}`} className="card--image" alt="swimmer" />

这种方式无需webpack处理图片，直接从public根目录读取，适合图片数量多或不想通过import管理的场景。

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