I can't add an Image

HTML & CSS
1

Hi! Please someone help!
I am new to CSS and I am trying to do something simple but for some reason it’s not working for me.

All I am trying to do is to add an image :flushed: by doing the following:

<img src="Images"/banner.png">

Not sure what I am doing wrong but the above just doesn’t work. Please help!!!

2

Here’s the code <img src="Images/banner.png>

3

Welcome to the forums, @amilcarebosco. I edited your pist to format the code.

When you post code, you need to format it so that it will show up properly. To do this, place three backticks () on the line before the code, and three backticks on the line after. OR you could highlight your code and select the </>` icong that is above the edit area.

By the way, make sure your " are in the right spit. Try this html:

<img src="Images/banner.png">

Also, you used Images instead of images. Make sure your folder is also capitalized, because it is case-sensitive.

1 Like
4

<img src="Images"/banner.png">

<img src="Images/banner.png>

Which is it? Both are wrong. You need matching quotes;

<img src="Images/banner.png">
1 Like
5

Yor are doing mistake in the syntax of the Img tag, here I am showing correct tag to insert an image into HTML.

<img src="images/banner.png">
6

Three users all posted at the same time!

The first code example you posted has to many " and the second has to few.

Try:

<img src="Images/banner.png">

Not the path needs to be correct and on a Linux server everything is case sensative

1 Like
7

Thanks for your reply.

I have entered it as you have shown but still doesn’t work!

8

What does not work?

Start from basics:
Is the image there
is the image path correct
Are you getting any errors
Is there a problem elsewhere in your code? Look at the code in the editor as it is usually colored as in the code examples posted above.

3 Likes
9

Sometimes CSS is very playful. It knows that you are new and it teases you. :slight_smile:

In this post, I am saying most of the same things that others have already said.

What editor are you using to write your web page?

Do you know the difference between uppercase letters and lower case letters? (some alphabets have no case.)

Can you show the relationship between the folders (directories) in your web site? In particular, (1) what is the name of the folder where the HTML file is located (that is probably the root directory), (2) from the root directory, where is the folder (what is the path) where the CSS file is located, and (3) from the root directory, where is the folder where the image file is located?

Your paths might look like one of these:

/mywebsite/index.html
/mywebsite/css/mycss.css
/mywebsite/css/Images/banner.png

OR maybe

/mywebsite/index.html
/mywebsite/css/mycss.css
/mywebsite/Images/banner.png

Then, into your next post, copy and paste the code from the CSS file that points to the banner image. Be sure it is an exact copy! check spelling, case and spaces.

Then be sure that the spelling of the image, banner.png, is the same as the the spelling in the CSS, and be sure the path to the image matches the path from the CSS file to the image. Any dots or backslashes in front of the path in the HTML and CSS matter, so be sure to copy them exactly.

In the top of the HTML file, there should be a path to the CSS written in the head of the page. Please copy and paste that link exactly.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.