CODEWITHSUNDEEP
javascripthtmlcssreactjs
Mohd Arslaan
Mohd Arslaan

Reputation: 39

module not found in react js when using a path of image

i just started react js but having trouble in importing a path of image to the webpage. I have a folder named assets and it have images, i want to use those images in my project but when giving it as a input in the code it shows: "ERROR in ./src/containers/products/Products.jsx 7:0-33 Module not found: Error: Can't resolve '../../assets/'"

Here is the code for the following

import React from 'react';
import './products.css';
import {Prodfeat} from '../../components'
import logo from '../../assets/';

const Products = () => {
    return (
      <div className='gpt3__products' id='products'>
        <div className='gpt3__products-heading'>
          <h1>We have something for everyone!</h1>
        </div>
        <div>
          <Prodfeat title='product 1' text='description of product1' productimg={`${logo}blog01.png`}/>
          <Prodfeat title='product 2' text='description of product2' productimg={`${logo}blog02.png`}/>
          <Prodfeat title='product 3' text='description of product3' productimg={`${logo}blog03.png`}/>
        </div>

      </div>
    )
  }

here is the code for the prodfeat component:

import React from 'react';
import './prodfeat.css';

const Prodfeat = ({title, text, productimg}) => {
  return (
    <div className='gpt3__prodfeat' >
        <div className='gpt3__prodfeat-desc'>
            <div className='gpt3__prodfeat-heading'>
                <h2>{title}</h2>
            </div>
            <div className='gpt3__prodfeat-text'>
                <p>{text}</p>
            </div>
        </div>
        <img src={productimg} alt={title}/>
    </div>
  )
}

i want to use the {logo} as a reference variable and point toward the photo so that i dont have to write the path again and again but it is not accepting it as the path but just a string. Please if you got any suggestions guide me in this problem. Thank you

Upvotes: 1

Views: 1683

Answers (5)

vairavel flash
vairavel flash

Reputation: 83

If you are going to assign the path in src ,

<img src="/img/logo.png"/>

this will work.[note: public folder has image>logo.png].

If you want to import that image in your file ,use the relative path.

import logo from "../../public/image/logo.png"

<img src={logo}/>

Just like normal import.

Upvotes: 0

Mohammad Zourmand
Mohammad Zourmand

Reputation: 45

I had this problem in tailwind & next js ! I did everything but problems didnt go anywhere /:

So I send all string of my className and then problems gone !!

Upvotes: 1

terrster
terrster

Reputation: 11

i think you missing the file to ref use

import logo from '../../assets/logo.xxx

Upvotes: 0

monim
monim

Reputation: 4406

you are using an absolute path when setting the src prop on the img element. you cannot achieve this when your images are located in the src folder . your images should be located in the public directory . then you don't need to import them just use the absolute path .

In your case : instead of : import logo from '../../assets/';

put your images inside public folder and store the path to a variable like this :

const logo = '<the path here >'

and access them :

<Prodfeat title='product 1' text='description of product1' productimg={`${logo}blog01.png`}/>

I made a codesandbox to show you exactly how it works !

Upvotes: 1

amarsik1
amarsik1

Reputation: 118

use this import import logo from '../../assets/logo.<file_format>';

Upvotes: 0

Related Questions