0

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.

  1. 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?

1 Answer 1

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>
    )
}
Sign up to request clarification or add additional context in comments.

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.