React项目中浏览器无法显示图片的问题排查求助

这是一个基于JavaScript的React项目，本地启动网站时浏览器无法加载图片，需从路径和格式两方面排查问题。

文件路径结构 #

src
├─ components
│  ├─ Main.js
│  └─ Navbar.js
└─ images
   └─ reactjs-icon.png

Navbar.js 代码 #

import React from "react"
export default function Navbar() {
    return (
        <nav>
            <img src="../images/reactjs-icon.png" alt="my"/>

            <h3>ReactFacts</h3>
            <h4>React Course - Project 1</h4>
        </nav>
    )
}

CSS 代码 #

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

nav {
  display: flex;
  align-items: center;
  background-color: #21222A;
  height: 90px;
  padding: 30px 25px;
}
nav > h3, nav > h4 {
  margin: 0;
}

nav > img {
  height: 30px;
  width: 30px;
}

问题根源与解决方法 #

核心问题 #

React项目中直接使用../images/reactjs-icon.png这类相对路径无法被打包工具（如webpack）正确解析，导致图片加载失败。

解决方案1：通过import引入图片资源 #

修改Navbar.js代码，先引入图片再使用：

import React from "react"
import ReactIcon from "../images/reactjs-icon.png"

export default function Navbar() {
    return (
        <nav>
            <img src={ReactIcon} alt="React图标"/>

            <h3>ReactFacts</h3>
            <h4>React Course - Project 1</h4>
        </nav>
    )
}

解决方案2：使用public目录存放图片 #

1. 在项目根目录创建public/images文件夹，将reactjs-icon.png移入其中
2. 修改图片路径为绝对路径：

<img src="/images/reactjs-icon.png" alt="React图标"/>

额外检查点 #

• 确认reactjs-icon.png是有效的PNG文件，无损坏
• 检查路径拼写，Linux/macOS环境下路径区分大小写，需严格匹配

内容的提问来源于stack exchange，提问作者shereen gamal