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

user_14091482 0
Viewed 104

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 :/

reactjs import image javascript
2 Answers

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

user_135680990

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]
user_56756640
Related