CODEWITHSUNDEEP
javascriptreactjsimageimport
Altro
Altro

Reputation: 938

React Image path is correct but it doesn't find/import it

I have images in one folder while one of the images is getting imported easily the second one isn't being found

import img from '../Img/a292.jpg';
// import img from '../Img/building5.png';

export default function First() {
    return (
        <section id="first" className="d-flex justify-content-center align-items-center">
            <img src={img} alt="img"/>
        </section>
    )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

My screen

when importing building5.png

when importing a292.jpg

EDIT: Things I have tried src={require('../Img/a292.jpg')} and I have tried to convert the image to png because all the PNG-s were working so I thought it's the format that meters,but no didn't work :/

Upvotes: 2

Views: 543

Answers (2)

Nairi Areg Hatspanyan
Nairi Areg Hatspanyan

Reputation: 749

I have an exotic solution, It's happening very rarely but it might happen to you, Change the name to numbers like 123.jpg It might happen that the letter a is in Russian and English or something like that, just try

Upvotes: 1

Soumendu Das
Soumendu Das

Reputation: 11

Well, I've faced the same issue and I do the following to import images:

  • Place the image a292.jpg in Public folder.
  • Now you can directly write in the img src the path as './a292.jpg'. [The path is relative to the Public folder because index.html is present in public folder so when the virtual DOM is rendered it takes the relative path from index.html]

Upvotes: 0

Related Questions