React项目中img引入本地图片无法显示如何解决？

你的图片引用方式不正确，这是使用Webpack/Vite等打包工具搭建的React项目中，加载本地图片的常见错误。
你在<img>的src属性里直接写源码层面的相对路径../images/logo.png时，打包工具不会识别处理该路径：项目构建后源码目录结构会被重构，静态资源通常会被重命名追加内容哈希、输出到独立的资源目录，浏览器访问构建后的页面时，会按照输出后的文件结构查找资源，按照源码里写的相对路径自然无法定位到图片，因此会显示破损占位图标。
实际页面报错显示效果：

以下两种方案都可以解决问题，优先推荐第一种：

• 方案1：将图片作为ES模块导入（全场景通用，推荐）
  在组件顶部通过import语法引入本地图片，打包工具会自动完成路径解析、资源定位，将导入得到的变量绑定到img的src属性即可，修改后代码如下：

import React from "react";
import "../css/navbar.css";
// 导入本地图片资源，打包时会自动处理路径
import logo from "../images/logo.png";

export default function Navbar() {
    return (
        <div className="navbar-container">
            <img src={logo} className="logo" />
        </div>
    );
}

• 方案2：放置到public目录通过绝对路径引用（适用于Create React App等内置public静态目录的脚手架）
  将logo.png移动到项目根目录下的public/images/文件夹中，该目录下的资源不会被打包工具做重命名、路径转换处理，会直接原样输出到构建产物根目录，此时直接在src中写根路径开头的绝对地址即可，无需额外导入：

import React from "react";
import "../css/navbar.css";

export default function Navbar() {
    return (
        <div className="navbar-container">
            <img src="/images/logo.png" className="logo" />
        </div>
    );
}

注意：如果项目不是部署在域名根路径，使用第二种方案需要同步调整脚手架的publicPath配置，否则线上部署时可能出现资源404问题。

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