React项目中JSX的img标签无法加载本地资源图片求助

问题原因 #

你直接使用"src/images/my_japan_trip.jpg"这类相对路径，还多余地用new Image()构造图片对象，这不符合React项目的资源处理规则。React打包时会重新处理资源路径，直接写这种相对路径会导致打包后找不到图片文件，所以出现破碎图标。

两种可行解决方案 #

方案一：导入图片文件（推荐） #

在组件顶部导入目标图片，Webpack会自动处理资源路径，直接使用导入的变量作为图片src：

import myJapanTripImg from './images/my_japan_trip.jpg'; // 路径需与当前组件文件相对应

export default function Journal() {
    const journal = {
        title: "My Japan trip",
        image: myJapanTripImg,
        text: "I went to Japan last winter."
    }
    return (
        <div id="journal">
            <div>
                <h2>{journal.title}</h2>
            </div>
            <div>
                <img src={journal.image} alt={journal.title} />
            </div>
            <div>
                <p>{journal.text}</p>
            </div>
        </div>
    )
}

方案二：使用public文件夹存放图片 #

将图片放到项目根目录的public/images/文件夹下，然后用绝对路径访问：

export default function Journal() {
    const journal = {
        title: "My Japan trip",
        image: "/images/my_japan_trip.jpg",
        text: "I went to Japan last winter."
    }
    return (
        <div id="journal">
            <div>
                <h2>{journal.title}</h2>
            </div>
            <div>
                <img src={journal.image} alt={journal.title} />
            </div>
            <div>
                <p>{journal.text}</p>
            </div>
        </div>
    )
}

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