React.js加载public目录本地图片失败的解决方案

加载失败核心是搞混了React项目两类静态资源的加载规则：

• require()、import是打包工具的模块引入语法，只能用来引用src目录下会走打包流程的资源，打包时会自动完成压缩、哈希命名、路径替换等处理。
• public目录下的文件不会走打包流程，构建时会直接原封不动拷贝到最终产物的根目录，根本不支持用require/import的模块方式引入。你现在用require去引public里的图片，打包阶段根本解析不到正确的模块，返回的路径是错误的，自然会出现裂图。之前尝试import方法失败也是同一个原因——图片放在public目录下，模块引入逻辑扫描不到这个资源。

根据你当前的目录结构选一种即可：

• 方案1：图片保留在public目录，直接写绝对路径（改造成本最低）
  public目录下的资源访问路径直接对应站点根路径，不需要任何引入操作，直接写路径就能用：

export default function Home() {
  return (
    <img src="/images/icon.png" alt="功能图标" />
  )
}

如果项目不是部署在域名根路径、而是在子目录下，就拼接脚手架自带的公共路径变量避免404：

<img src={`${process.env.PUBLIC_URL}/images/icon.png`} alt="功能图标" />

不管是本地调试还是部署到Vercel，Create React App、Next.js这些常用React脚手架都默认支持这个变量，会自动匹配实际部署路径。

• 方案2：把图片移到src目录下，用模块方式引入
  如果希望图片享受打包压缩、哈希缓存、tree-shaking等构建优化，可以把图片从public目录挪到src下的资源文件夹（比如src/assets/images），再用import/require引入：

// 写法1：顶部提前import
import icon from '../assets/images/icon.png'
export default function Home() {
  return <img src={icon} alt="功能图标" />
}

// 写法2：行内直接require（注意：Webpack5、React18及以上的新版本，不需要加.default，直接取require返回值即可，只有老版本才需要加.default，多写反而会导致路径错误）
export default function Home() {
  return <img src={require('../assets/images/icon.png')} alt="功能图标" />
}

渲染异常裂图截图

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