CODEWITHSUNDEEP
javascriptreactjstypescriptimage
Joe Ellul-Turner
Joe Ellul-Turner

Reputation: 21

Can't find file path of image in reactjs

None of the images I have saved locally can be found when trying to import them in my project.

import {portfolio} from './portfolio.png'

Leads to "Cannot find module './portfolio.png' or its corresponding type declarations.ts(2307)".

The image file path is 100% correct.

Update: Image loads however I would like to know how to remove the typescript error.

Upvotes: 0

Views: 1387

Answers (3)

Horlando Leão
Horlando Leão

Reputation: 13

Use the ES6 standard to import images into react.

If in public use the absolute path.

If it is in src you can use relative path.

https://create-react-app.dev/docs/adding-images-fonts-and-files/

import MyImage from './logo.svg'; # In local
import MyImage from 'images/logo.svg'; # In Public

export default function App() {
   return(
     <div>
       <img src={MyImage} alt="logo" />
     </div>
   );
}

Upvotes: 1

Varun Kaklia
Varun Kaklia

Reputation: 376

Hey @Joe there are multiple ways to call images- first-

import image from './porfolio.png'

second, in this method you need to post image inside public images folder-

<img src="/images/image.png"/>

Hope these methods help you to solve your query, if you still facing issue just lemme know, I will hlep you. Thanks

Upvotes: 0

rastiq
rastiq

Reputation: 383

Try default import: import portfolio from './portfolio.png'.

Upvotes: 1

Related Questions