React项目本地图片模块无法解析问题求助

数据老陈

2026-8-19

模块无法解析的原因及解决方法

错误原因分析

1. 路径分隔符的转义问题

在JavaScript字符串中，反斜杠\是转义字符，会被解析器忽略。你在import语句中使用..\..\..\src\assets\Home\shape-bg.png时，所有反斜杠都被吃掉，导致路径变成了......srcassetsHomeshape-bg.png，自然找不到目标文件。

2. 相对路径层级计算错误

从你的组件路径src/Portfolio_container/Home/Footer/Footer.js来看：

最初用的../../assets/Home/shape-bg.png只向上跳转了2级（到src/Portfolio_container/Home/目录），还没到项目的src根目录，根本找不到assets文件夹。
后来的路径尝试直接写src/开头，但因反斜杠转义失效，同时这种写法在React默认配置下也不属于正确的相对路径写法。

解决方法

步骤1：统一使用正斜杠作为路径分隔符

所有路径都换成正斜杠/，彻底避免转义问题。

步骤2：计算正确的相对路径

根据组件和图片的实际位置：

组件位置：src/Portfolio_container/Home/Footer/Footer.js
若图片在src/assets/Home/shape-bg.png，需要向上跳转3级到src根目录，再进入assets/Home/，正确的相对路径是../../../assets/Home/shape-bg.png。

修正后的代码示例

方式1：使用import引入

import React from 'react'
import './Footer.css'
import shape from '../../../assets/Home/shape-bg.png'

export default function Footer() {
  return (
    <div className='footer-container'>
      <div className='footer-parent'>
        <img src={shape} alt='背景形状' />
      </div>
    </div>
  )
}

方式2：使用require引入

import React from 'react'
import './Footer.css'

export default function Footer() {
  return (
    <div className='footer-container'>
      <div className='footer-parent'>
        <img src={require('../../../assets/Home/shape-bg.png').default} alt='背景形状' />
      </div>
    </div>
  )
}