react vite importing img from assets error

Question

i am trying to import a logo but i keep getting this error. the logo is in the assets in my src folder.

import React from 'react';
import {logo} from '../assets'
const Navbar = () => {
  return (
    <div className='w-full h-[80px] bg-white border-b'>
      <div className='max-w-[1480px] m-auto w-full h-full flex justify-between items-center'>
       <img src={logo} />
      </div>
    </div>
  )
}

export default Navbar

and the error i get is this. [vite] Internal server error: Failed to resolve import "../assets" from "src\components\Navbar.jsx". Does the file exist?

i tried using lots of different ways thinking it was a syntax error but nothing worked.

score 1 · Answer 1 · answered Feb 19 '23 at 05:41

1

Try with the following line

import logo from '../assets/logo.png'; //change file extension

answered Feb 19 '23 at 05:41

Arman

641
4
12

i tried that. the only difference is mine is an svg. didn't work – Marco Feb 19 '23 at 05:43
are you saying i should convert the svg to a png and place it in assets? – Marco Feb 19 '23 at 05:44
No. You don't need to convert to png. Check this link to import svg in react project https://stackoverflow.com/questions/42296499/how-to-display-svg-icons-svg-files-in-ui-using-react-component – Arman Feb 19 '23 at 05:46

score 0 · Answer 2 · answered Mar 07 '23 at 18:11

0

I'm working on the 'Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind' video on JS Mastery and came across this post. I'm pretty sure we're working on the same thing here. If so, your issue is probably coming from that first import statement in constants/index.jsx. If you have not created the imports referenced (people01, people02, people03, etc) then it will throw an error. Comment out this line & it should work!

answered Mar 07 '23 at 18:11

Nicole Rodrigues

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 13 '23 at 15:07

score 0 · Answer 3 · answered May 20 '23 at 16:43

0

I am also working on the same course and I think you've done the same mistake as me, when you unzipped the assets folder, note that there might be another "assets" folder inside it, due to unzipping. So just cut and paste your files from the inner assets folder to the outer assets folder, and try the code.

answered May 20 '23 at 16:43

Pranay Parikh

1

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/34420143) – Wahlstrommm May 23 '23 at 13:15

react vite importing img from assets error

3 Answers3