Module not found: Can't resolve '../../assets/img-3.jpg' in ''
Module not found: Can't resolve '../../assets/img-3.jpg' in ''
我正在尝试将一些本地图片导入到ReactJS中,但是没有成功。我正在使用reactstrap
来制作一个轮播图。以下是错误信息:
\n
\n模块未找到:无法解析\'C:\\ Users \\ adity \\ Desktop \\ foodcubo-dev \\ project \\ src \\ Layouts \\ header\'中的\'.. / .. / assets / img-3.jpg\'\n
\n我尝试使用import
方法导入图片,尽管这些图片在assets
中是可用的。我认为导入是正确的,问题可能与渲染有关,但我不确定。这是我的代码:
\n
\nHeader.js\n
\n
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;
(Module not found: Can't resolve '../../assets/img-3.jpg' in '')这个问题的出现的原因是路径引用错误。在引用图片路径时,使用了相对路径(../../assets/img-3.jpg),但是在当前文件的路径下找不到该图片。
解决方法是将图片路径存储为相对于当前文件的相对路径(testimage.png),并在使用时拼接上正确的路径('./images/' + testimage.png)。
代码示例:
// 错误的引用方式 import image from '../../assets/img-3.jpg'; // 正确的引用方式 const imagePath = 'testimage.png'; import image from './images/' + imagePath;
通过将图片路径存储为相对路径,并在使用时拼接正确的路径,可以解决(Module not found: Can't resolve '../../assets/img-3.jpg' in '')的问题。
在这个问题中,报错信息是“Module not found: Can't resolve '../../assets/img-3.jpg' in ''”,这个错误的出现是因为路径不匹配导致的。
解决方法是检查路径是否正确,确保路径在代码中与实际路径一致。在这个例子中,问题是由于文件夹名称中含有尾随空格导致的,所以解决方法是删除文件夹名称中的空格,使路径与代码中的路径匹配。
具体来说,原本的路径在代码中是./images/testimage.png
,但实际路径是./images /testimage.png
,由于路径中含有空格,所以无法解析。
这个错误可能是在创建文件夹时犯下的错误,因此需要检查并修复文件夹名称中的空格问题。
总结起来,解决这个问题的方法是确保路径在代码中与实际路径一致,避免在文件夹名称中使用空格。