• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Problems with Images

Silver-Chimes

New Coder
Hello all,

Okay so basically I am suddenly having issues with images displaying when I didn't have them before.

I've made sure that I've used the correct file name for the IMG file
I've made sure that the image file is located in the same location as has been put in the IMG tag, and has not been moved at all!
I've made sure that I have used the correct spelling for the image and folder
My browsers are updated as well

I have even copied and used the EXACT code that I've used for a previous file, where all the images displayed, but this time in a new document they don't display.

I've been using Opera (where images from previous file have showed up), however, the images don't show up on Chrome or Firefox either.

The below is where I am having issues:

HTML:
<h2>Various Holiday Images</h2>
<p style="text-align:center;"><img
<img src="images/swissalps.png" alt="Holiday Image" style="width:450px;height:300px;">

I've no idea what is going on :mad:
 
Last edited by a moderator:

Ash

Active Coder
Something I like to do when I have this problem is to view the page source, right-click on the image link and open it. If it appears then the src is correct and it might be a browser issue. If it doesn't, the image src value might be wrong.

c2E4jAW.png


EDIT
Could it be the extra img tag that hasn't been closed that is causing the issue?

HTML:
<p style="text-align:center;">
<img
<img src="images/swissalps.png" alt="Holiday Image" style="width:450px;height:300px;">
 

Silver-Chimes

New Coder
I did get rid of the extra <img but it did nothing.
I've gone to the image and clicked right on the image link and have seen that the image is jpeg and not png.

I've downloaded the image again and deleted the other one, but have given it a .jpeg ending, and have removed the extra <img
I've opened the file with Opera, Chrome and Firefox (all of which are updated) and yet the image still doesn't appear.

Actually the cat image you see in my avatar is one I used in another file about Cats (I am practising the html and CSS as I go along with trying to develop my own basic web pages) and that one works.
It was one of the images I copied exactly as it was in the Cats file and it doesn't open at all, however, it opens in the Cats file.
 

Ash

Active Coder
@Silver-Chimes Make sure that the file name in the img tag has .jpg and not .jpeg. So, your code after the corrections you mentioned previously should look like this now:

HTML:
<h2>Various Holiday Images</h2>
<p style="text-align:center;">
<img src="images/swissalps.jpg" alt="Holiday Image" style="width:450px;height:300px;">
</p>
 

Silver-Chimes

New Coder
I've tried the above but still no luck.

Out of curiosity, is it better to save images as jpg?
Also when I download an image and it comes to save option, is it best to Save Type as (Jpeg image, or the All Files)?
I have created a specific 'images' folder on my desktop, and have been trying to use that for images .

I've finally managed to put an image by using an image from another server, so I'll use this method for now.

Thanks for your help but I'm still at a loss as what I am doing wrong :rolleyes:
 

Malcolm

Administrator
Administrator
Staff Team
Hi @Silver-Chimes,

Welcome to Code Forum! :)
I've tried the above but still no luck.

Out of curiosity, is it better to save images as jpg?
Also when I download an image and it comes to save option, is it best to Save Type as (Jpeg image, or the All Files)?
I have created a specific 'images' folder on my desktop, and have been trying to use that for images .

I've finally managed to put an image by using an image from another server, so I'll use this method for now.

Thanks for your help but I'm still at a loss as what I am doing wrong :rolleyes:
Using JPG files is probably more recommended as it is smaller size to PNG. PNG files can actually slow your site down. You can save the file as either jpeg or all files, but to prevent any issues just save it with the file type that it suggests.

As for your code, perhaps try adding a "/" in front of images in your img src path. Let's see if that works.
HTML:
<h2>Various Holiday Images</h2>
<p style="text-align:center;">
<img src="images/swissalps.jpg" alt="Holiday Image" style="width:450px;height:300px;">
</p>
 

Silver-Chimes

New Coder
Hello Malcom and thanks for your reply.
I have added the "/" as you said in front of images but it still doesn't work!

I think the reason why the above doesn't work for me is that I'm recent to html and css and still need to find my feet.
It's also probably because of my way of learning, I'm not very good at 'list type' instructions, or as below taken from the W3Schools site:

  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"

I just find the above my head I'm afraid, for example the below makes me understand html/css far better:

Html is like your body
CSS is like the clothing you wear, your skin colour, hair type and colour etc


I'm not saying that I expect every-single-explanation to be like the one above, but it makes me understand the above better.
 

Malcolm

Administrator
Administrator
Staff Team
Hello Malcom and thanks for your reply.
I have added the "/" as you said in front of images but it still doesn't work!

I think the reason why the above doesn't work for me is that I'm recent to html and css and still need to find my feet.
It's also probably because of my way of learning, I'm not very good at 'list type' instructions, or as below taken from the W3Schools site:

  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"

I just find the above my head I'm afraid, for example the below makes me understand html/css far better:

Html is like your body
CSS is like the clothing you wear, your skin colour, hair type and colour etc


I'm not saying that I expect every-single-explanation to be like the one above, but it makes me understand the above better.
I have tested this on my platform and the HTML code that was provided works without any issues. Would be able to provide all the code for for .html document?

Remember coding takes practice, practice gives you experience.
 
Last edited:

Ash

Active Coder
I have tested this on my platform and the HTML code that was provided works without any issues. Would be able to provide all the code for for .html document?

Remember coding takes practice, practice gives you experience.
Yeah, this would be useful. Or uploading the files (including the .HTML document and the image files in the appropriate folder) to a free host so that we can see it for ourselves. The code works for me on my side as well.
 

Top