未找到模块：无法在“”中解析“../../assets/img-3.jpg”

Posted 2023-02-22

【中文标题】未找到模块：无法在“”中解析“../../assets/img-3.jpg”

【英文标题】：Module not found: Can't resolve '../../assets/img-3.jpg' in ''

【发布时间】：2019-07-17 13:19:43

【问题描述】：

我正在尝试将本地图像导入 reactjs。但它不起作用。我正在使用 reactstrap 制作轮播。

这是错误

找不到模块：无法解析“C:\Users\adity\Desktop\foodcubo-dev\project\src\Layouts\header”中的“../../assets/img-3.jpg”

我尝试使用导入方法导入图像，尽管图像在资产中可用。我猜进口很好。问题可能与渲染有关。我不知道。

这是我的代码。

Header.js

import React,  Component  from 'react';
import imgone from '../../assets/img-1.jpg'
import imgtwo from '../../assets/img-2.jpg'
import imgthree from '../../assets/img-3.jpg'

import 
  Carousel,
  CarouselItem,
  CarouselIndicators,
  CarouselCaption
 from 'reactstrap';

const items = [
    
    src: imgone,
    altText: 'Slide 1',
    caption: 'Slide 1'
  ,
    
    src: imgtwo,  
    altText: 'Slide 2',
    caption: 'Slide 2'
  ,
    
    src: imgthree,
    altText: 'Slide 3',
    caption: 'Slide 3'
  
];

class Header extends Component 
  constructor(props) 
    super(props);
    this.state =  activeIndex: 0 ;
    this.goToIndex = this.goToIndex.bind(this);
    this.onExiting = this.onExiting.bind(this);
    this.onExited = this.onExited.bind(this);
  

  onExiting() 
    this.animating = true;
  

  onExited() 
    this.animating = false;
  


  goToIndex(newIndex) 
    if (this.animating) return;
    this.setState( activeIndex: newIndex );
  

  render() 
    const  activeIndex  = this.state;

    const slides = items.map((item) => 
      return (
        <CarouselItem
          onExiting=this.onExiting
          onExited=this.onExited
          key=item.src
        >
          <img src=item.src alt=item.altText />
          <CarouselCaption captionText=item.caption captionHeader=item.caption />
        </CarouselItem>
      );
    );

    return (
      <Carousel
        activeIndex=activeIndex
        next=this.next
        previous=this.previous
      >
        <CarouselIndicators items=items activeIndex=activeIndex onClickHandler=this.goToIndex />
        slides
      </Carousel>
    );
  



export default Header;

【问题讨论】：

图片的绝对路径是什么？

/c/Users/adity/desktop/foodcubo-dev/project/src/assets

@lacostenycoder 这是完整的网址

@lacostenycoder 它说的是 webpack 但这里我使用的是 create-react-app

也许可以试试facebook.github.io/create-react-app/docs/…

【参考方案1】：

我有同样的问题。对我来说，问题是我创建的文件夹的名称中有一个尾随空格：

代码中的路径：./images/testimage.png 实际路径：./images /testimage.png

如您所见，“代码中的路径”！=“实际路径”，因此无法解析代码中的路径。

解决方案是从文件夹名称中删除所有空格。我可能在创建文件夹时犯了这个错误。

【讨论】：

我认为它没有解决问题。也许您可以尝试在这个问题上更准确。

【参考方案2】：

我确实遇到了同样的问题，这样做解决了我的问题：

./../../assets/img-3.jpg