Module not found: Can't resolve '../../assets/img-3.jpg' in ''

26 浏览
0 Comments

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;

0
0 Comments

(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 '')的问题。

0
0 Comments

在这个问题中,报错信息是“Module not found: Can't resolve '../../assets/img-3.jpg' in ''”,这个错误的出现是因为路径不匹配导致的。

解决方法是检查路径是否正确,确保路径在代码中与实际路径一致。在这个例子中,问题是由于文件夹名称中含有尾随空格导致的,所以解决方法是删除文件夹名称中的空格,使路径与代码中的路径匹配。

具体来说,原本的路径在代码中是./images/testimage.png,但实际路径是./images /testimage.png,由于路径中含有空格,所以无法解析。

这个错误可能是在创建文件夹时犯下的错误,因此需要检查并修复文件夹名称中的空格问题。

总结起来,解决这个问题的方法是确保路径在代码中与实际路径一致,避免在文件夹名称中使用空格。

0
0 Comments

在遇到(Module not found: Can't resolve '../../assets/img-3.jpg' in '')这个问题时,我采取了以下方法解决了这个问题:

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

0