React JS中图片加载失败/Module not found Error问题求助

项目结构 #

src
 -assets
     fut.png
 -components
    -admin_dashboard
        Sidebar.js
 -App.js
 -pages
    Dashboard.js 

问题详情 #

在Sidebar.js中加载assets/fut.png时遇到以下问题：

• 使用相对路径<img src={"../assets/fut.png"}/>无法加载图片
• 使用require("../assets/fut.png")时出现错误：

  Module not found: Error: Can't resolve '../assets/fut.png' in 'D:\Users [DONT DELETE]\react js\fut_test\src\components\admin_dashboard'
  

• 将图片放到Sidebar.js同目录下，用<img src={"fut.png"}/>访问仍无法加载

组件渲染流程：App.js → Dashboard.js → Sidebar.js

附当前相关代码（注：代码中定义的是Sidebar函数，推测应为Sidebar.js的代码）：

import React from 'react'

function Sidebar(){
  return(
    <div className="flex">
      <img src={require("../assets/future_ik.png")} />
    </div>
  ); 
}

export default Sidebar 

解决方法 #

1. 修正文件名拼写错误 #

从代码可见，你引用的是future_ik.png，但项目结构中assets目录下的图片是fut.png，文件名不匹配是导致模块找不到的直接原因，先修正为一致的文件名。

2. 使用ES6导入方式加载图片 #

在Sidebar.js中直接导入图片资源，webpack会自动处理路径：

import React from 'react'
// 路径说明：从admin_dashboard目录回退两级到src，再进入assets目录
import futImage from '../../assets/fut.png'

function Sidebar(){
  return(
    <div className="flex">
      <img src={futImage} alt="fut" />
    </div>
  ); 
}

export default Sidebar 

3. 配置webpack路径别名（推荐） #

如果项目基于Create React App创建，可借助craco配置路径别名，避免复杂的相对路径：

1. 安装craco依赖：

   npm install @craco/craco --save-dev
   

2. 在项目根目录创建craco.config.js：

   const path = require('path')
   
   module.exports = {
     webpack: {
       alias: {
         '@assets': path.resolve(__dirname, 'src/assets')
       }
     }
   }
   

3. 修改package.json中的启动命令：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

4. 在Sidebar.js中使用别名导入图片：

   import futImage from '@assets/fut.png'
   

4. 将图片放入public目录 #

若不想通过webpack处理图片，可将fut.png放到项目根目录的public文件夹下，直接用根路径访问：

<img src="/fut.png" alt="fut" />

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