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

Question

I am trying to import some local images into reactjs. But it's not working. I am using reactstrap to make a carousel.

This is the error:

Module not found: Can't resolve '../../assets/img-3.jpg' in 'C:\Users\adity\Desktop\foodcubo-dev\project\src\Layouts\header'

I tried to import the images using the import method, although the images are available in assets. Import is fine, I guess. The problem might be related to rendering. I don't know.

This is my code:

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

I did encounter the same problem and doing this fixed my problem:

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

Answer 2

I had the same issue. For me the problem was that the folder I had created had a trailing blank space in it's name:

path in code: ./images/testimage.png actual path : ./images /testimage.png

as you can see, "path in code" != "actual path", hence, the path in code cannot be resolved.

The solution was to just remove any blank spaces from your folders names. I probably made this error while creating the folder.

Answer 3

Solved!!!

Store image path as (testimage.png) instead of (./images/testimage.png), then concat ('./images/') to (testimage.png) when using.

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 = '' /> 

and it showed the same error also tried importing it and still did not work. All i did was to call the full name of my image file and not to abbreviate it.

Answer 5

I tried all but for me was solution is just rename file name to other name and use it with new name.

Answer 6

import admin_image from "../../assets/admin-image.png";

just provide a name for the content you want to get then provide the path if it is in src folder, if it is in public folder try the following import,

import admin_image from "/public/assets/admin-image.png"; (or) import admin_image from "/assets/admin-image.png";

Answer 7

or maybe you just did not spell the file, folder, or outlined a file path correctly...