时间戳

首页 > 解决方案 > 无法在 Reactjs 中导入图像返回错误找不到模块：无法解析

reactjs - 无法在 Reactjs 中导入图像返回错误找不到模块：无法解析

问题描述

我在“projectfolder/src/pages/Home.js”中有以下组件：-

import React from "react";
import MenuButton from "../components/Home/MenuButton";
import menuicon from "images/menuicon.png";

export default function Home() {
  return (
    <div className="container">
      <div className="row">
        <MenuButton title="home ">
          <img src={menuicon} />
        </MenuButton>
        <MenuButton title="account" />
        <MenuButton title="create new" />
      </div>
      <div className="row">
        <div className="col-md-12">
          <div className="signin-btns"></div>
        </div>
      </div>
    </div>
  );
}

我正在尝试导入位于“projectfolder/public/images”中的图像文件“menu-icon.png”。

我尝试使用以下导入导入它：-

  1. 从“images/menu-icon.png”导入 menuicon 返回以下错误：-

./src/pages/Home.js 模块未找到：无法解析 'C:\Users\AHMAD\project\src\pages' 中的 'images/menu-icon.png'

  1. 从“/images/menu-icon.png”导入菜单图标；

./src/pages/Home.js 未找到模块：您试图导入项目 src/ 目录之外的 /images/menu-icon.png。不支持 src/ 之外的相对导入。

  1. 从“../../images/menu-icon.png”导入菜单图标；

./src/pages/Home.js 未找到模块：您试图导入项目 src/ 目录之外的 ../../images/menu-icon.png。不支持 src/ 之外的相对导入。

我正在使用 ReactJS 版本：“^16.13.1”和“react-router-dom”：“^5.1.2”

标签： reactjs

解决方案

通过将图像放入其中，projectfolder/public/images它位于您的 src 目录之外。您将无法以这种方式导入它。您可以执行以下任一操作来解决此问题：

  • 将图像移入projectfolder/src/images并import menuicon from './images/menu-icon.png'

  • 将其公开并删除导入语句。而是像这样使用它：<img src='images/menu-icon.png' />

推荐阅读