Issue with img loading and border property in react app with css

Question

I have a small react project and am facing issues with the basic CSS! I have shared the files for reference so that anyone can try on their machines for feedback/answers. Github link

Issue 1: the image does not load. I tried all the things mentioned in internet like checking the path of the file and spelling of file. all seems to be fine. since this will run through server, I have seen the link to be https://localhost:3000/src/assets/img/images.jfif

I have tried the src to be

src="./src/assets/img/images.jfif" 
src="src/assets/img/images.jfif" 
src="../../../src/assets/img/images.jfif" 
src="../../assets/img/images.jfif" 
src="File://I:/samples/Portfolio/portfolio2/src/assets/img/images.jfif"

nothing seems to work.

Strange behaviour when border property is removed! Something strange happens when i remove the border property from .portfolio__intro :) border: 2px solid black; the height of the intro seems to go down so much which I was not able to understand why this happens!

I have tried in Google chrome and Firefox browsers.

Could someone take a look and help me find where I am going wrong and also share knowledge on why this issue happens?

hissroth · Accepted Answer · 2021-04-02 08:05:23Z

1

Try to put the images in your public folder, you will just have to call them by src="./toto.png. Or if you want to keep using them from the assets folder then you have to import them.

import Toto from "././src/assets/img/images.jfif"


export const test = () => {
    return (
        <div>
            <img src={Toto} alt="toto" />
        </div>
    )
}

answered Apr 2, 2021 at 8:05

hissroth

2512 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Murthy Over a year ago

Thanks a lot @hissroth. The image part is working fine. any idea why the second issue happens. I used border property for testing purpose. If I remove that it is behaving very strangely. I have no idea why that happens. need to understand

Collectives™ on Stack Overflow

Issue with img loading and border property in react app with css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related