React组件导入同目录图标资源提示模块未找到该如何解决

你遇到的报错是相对路径引用错误。./代表当前文件所在目录，你写的./Icons/left-arrow.png是在BtnSlider.js所在的Slider文件夹下查找Icons子文件夹，但从目录结构来看Icons文件夹和Slider文件夹是同级关系，因此无法匹配到资源。

解决方案 #

• 将导入语句里的相对路径调整为上一级目录标识../，修改后的代码如下：

import React from "react";
import "./Slider.css";
// ../表示从当前文件夹的上一级目录开始查找
import leftArrow from "../Icons/left-arrow.png";
import rightArrow from "../Icons/right-arrow.jpg";

export default function BtnSlider() {
  return (
    <button className="btn-slide">
      <img src={rightArrow} alt="右箭头" />
    </button>
  );
}

• 额外检查项：确认Icons文件夹下的两个图片文件名、后缀是否和导入语句里的完全一致，避免大小写、后缀拼写错误（比如实际是.jpeg你写了.jpg）导致的报错，Windows系统本地开发路径不区分大小写，但部署到Linux类服务器时会触发大小写不匹配的异常，提前统一规范可以避免后续问题。

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