I've searched many YouTube views of how to add images in folders to HTML files, I still can't do it I don't know what I'm doing wrong. Since yesterday I've been trying to get it to work.

I want to upload an image from my laptop then add it to my HTML work so it can show in browser.

I've renamed the picture and did it exactly as I saw on YouTube, yet it still not working

Picture one is my HTML sample while picture 2 is the result.

The image location might be wrong

FreakDesign:
The image location might be wrong

how please I don't understand.

I just renamed the first picture on my laptop, then type the name and added jpg to it.

What is image location??

TheGodlessGod:
how please I don't understand.

I just renamed the first picture on my laptop, then type the name and added jpg to it.

What is image location??

this image where did you save it?

FreakDesign:
this image where did you save it?

it's one of my childhood picture, I transferred it from my phone to the laptop.

These are some details I could find.

..

TheGodlessGod:
it's one of my childhood picture, I transferred it from my phone to the laptop.

These are some details I could find.

OK now change it to...

<img src="C:\Users\user\Pictures\mine.jpg />

And try again

Move the picture into the same folder u have the file(webpage)

FreakDesign:
OK now change it to...

<img src="C:\Users\user\Pictures\mine.jpg />

And try again

it worked.

Thanks alot

RealLordZeus:
Move the picture into the same folder u have the file(webpage)

how can I do that?

TheGodlessGod:
it worked.

Thanks alot

hits OK bro

TheGodlessGod:
how can I do that?

Your HTML file, where is the location?? Put the picture beside it

RealLordZeus:

Your HTML file, where is the location?? Put the picture beside it

in the documents section

TheGodlessGod:
in the documents section

Place the image there, and set your code back as it was before

TheGodlessFod, don't use full image path as it will later hurt when you start css animations.

Follow this

Create a folder to accommodate your code projects. Let your code projects have another one.
E.g myProjects as the overall folder, then another folder called 'myCodes' should be inside the myProjects and let your code works be stored there

Then create another folder called 'images' inside the myProjects folder then store all your pictures there.

Then in your codes in the myCodes folder, link your pictures there this way background-image: url(../images/myself.png).

This should work

NB: your picture extension could be jpg, png, gif or anyone. Just write in the appropriate one.
All thansk to emmyloyalty

Bloggingtips:
TheGodlessFod, don't use full image path as it will later hurt when you start css animations.

Follow this

Create a folder to accommodate your code projects. Let your code projects have another one.
E.g myProjects as the overall folder, then another folder called 'myCodes' should be inside the myProjects and let your code works be stored there

Then create another folder called 'images' inside the myProjects folder then store all your pictures there.

Then in your codes in the myCodes folder, link your pictures there this way background-image: url(../images/myself.png).

This should work

NB: your picture extension could be jpg, png, gif or anyone. Just write in the appropriate one.
All thansk to emmyloyalty

thank you for taking your time writing this. I've read it thoroughly though I've a few problems( I'm a novice in this stuffs).

1. When you said I should create a folder to accommodate my code projects, I don't understand that. I just simply copy my HTML file to the place where "code project" is. Please explain better.

2. Secondly I've already transferred my pictures to the image folder you told me to create, the issue is linking it. Do you mean when adding images to the HTML, I should just add "url(../images/myself.png)".??

Thanks again

This is the folder you asked me to create.

The second picture is what I don't understand, how should I accommodate my codes in the folder?.

Do you mean to copy and paste the HTML file like I did?

TheGodlessGod:
This is the folder you asked me to create.

The second picture is what I don't understand, how should I accommodate my codes in the folder?.

Do you mean to copy and paste the HTML file like I did?

Copy your html file in my code folder

Then link your images with ../images/img.jpg

The theory behind this is because images belong to a different folder.

If it doesn't work then something else is wrong, inform me

If anyone is telling you to do full path, when you do css, there will be challenges

Bloggingtips:
Then link your images with ../images/img.jpg

The theory behind this is because images belong to a different folder.

If it doesn't work then something else is wrong, inform me

If anyone is telling you to do full path, when you do css, there will be challenges

@op, follow this you'll get it.

Bloggingtips, I like your zeal. More code to your codebase, brother.

Bloggingtips:
Then link your images with ../images/img.jpg

The theory behind this is because images belong to a different folder.

If it doesn't work then something else is wrong, inform me

If anyone is telling you to do full path, when you do css, there will be challenges

thanks for your contribution.

This is really complicated for me, I tried copying the photos to the new image folder I created.

That is an image location, do I need to type all that into the HTML?

I just typed the new location of the file on the HTML and it still works.

What they r u to do is to let the picture be in the same folder with your index.html file


Then do this <img src="./name of the picture.jpg"> //.png depending on the extension


If u still dnt understand then u need go back to study

QuantumR:
What they r u to do is to let the picture be in the same folder with your index.html file


Then do this <img src="./name of the picture.jpg"> //.png depending on the extension


If u still dnt understand then u need go back to study

but index.html is in a notepad.

I can't copy/move pictures or anything to it

TheGodlessGod:
thanks for your contribution.

This is really complicated for me, I tried copying the photos to the new image folder I created.

That is an image location, do I need to type all that into the HTML?

Use ../images/index.html

It should work

Op I notice you are using notepad to write your codes. Please download visual studio code.

Na wa for u op ooo, upon all this so so explanation..
Well, go to your desktop ,create a folder named "code"
Inside that folder, place your "index.HTML" file and the image, then revert your code to how it was in the beginning.

The picture should display.


For a more arranged process.
Inside the code folder
Create another folder with the name "images"
Move/copy the image into the new folder (images)
Then edit your code to <img src="images/mypicname.jpg"/>
If you still don't understand, pls learn another work

You should put the full path.


Learn how to code from my channel.

Subscribe to my YouTube channel and watch my videos. You’ll be glad you subscribed

https://www.youtube.com/channel/UCwNrlP_X_VV4vg00P2QmDnw