找不到模块：无法解析''中的'../../assets/img-3.jpg'

Question

我正在尝试将一些本地图像导入到 reactjs 中。但它不起作用。我正在使用

reactstrap

制作旋转木马。

这是错误：

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

我尝试使用

import

方法导入图像，虽然图像在

assets

中可用。进口没问题，我猜。问题可能与渲染有关。我不知道。

这是我的代码：

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;

Answer 1

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

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

Answer 2

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

代码中的路径：

./images/testimage.png

实际路径：

./images /testimage.png

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

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

Answer 3

解决了！！！

将图片路径存储为（testimage.png）而不是（./images/testimage.png），然后在使用时将（'./images/'）连接到（testimage.png）。

Answer 4

<figure className = 'profile-image'>
    <img src = {require('../../assets/img/pic.jpeg')} alt = '' />
</figure>

Replace .jpg with .jpeg
I used <img src = {require('../../assets/img/pic.jpg')} alt = '' /> 

它显示了同样的错误 也尝试导入它，但仍然没有用。我所做的只是调用我的图像文件的全名而不是缩写它。

Answer 5

我尝试了所有但对我来说解决方案只是将文件名重命名为其他名称并使用新名称。

Answer 6

或者您可能只是没有正确拼写文件、文件夹或勾勒出文件路径...