React项目图片无法加载求助：路径正确但图片不显示

目录结构 #

组件代码 #

import {useRef} from "react"
import {FaBars, FaTimes} from "react-icons/fa"
import "../css/navbar.css"

export function Navbar() {
    const navRef = useRef()

    const showNavBar = () => {
        navRef.current.classList.toggle("responsive-nav");
    }

    return (
        <navbar>
            <img src="my-app/public/images/logos/word logo trans-preview.png" />
            <nav ref={navRef}>
                <a href="/#">Home</a>
                <a href="/#">Services</a>
                <a href="/#">About</a>
                <a href="/#" className="bottom">Contact</a>
                <button className="nav-btn nav-close-btn" onClick={showNavBar}>
                    <FaTimes/>
                </button>
            </nav>
            <button className="nav-btn" onClick={showNavBar}>
                <FaBars/>
            </button>
        </navbar>
    )
}

问题描述 #

我确认文件路径正确、代码逻辑无误，但图片始终无法加载，项目其他功能均正常。已尝试将图片移动至不同文件夹、更换设备等操作，问题仍未解决，恳请提供技术帮助。

解决建议 #

• 修正静态资源引用路径：React项目中，public目录是静态资源的根目录，引用其中的文件不需要包含my-app/public前缀，直接从根路径/开始即可。修改图片的src属性为：

  <img src="/images/logos/word logo trans-preview.png" alt="网站Logo" />
  

• 校验文件名一致性：检查图片文件名的大小写、空格是否与代码中完全匹配（部分操作系统对文件名大小写敏感），同时确认图片文件本身未损坏。
• 清除缓存并重启服务：强制刷新浏览器缓存（Ctrl+Shift+R），同时重启React开发服务器（停止当前服务后重新执行npm start），避免缓存导致的资源加载异常。
• 确认public目录结构：确保public/images/logos目录确实存在，且目标图片文件在该目录下。

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