0

I am very new to html and I am kind of still learning! However, I have coded for my html to show a picture on my webpage. The image I am trying to display on my website is in the same folder as my html and my stylesheet. But when I load up my website, it shows a black square with a white x in it using Microsoft Edge. When I open my webpage in Google Chrome it shows a little cartoon picture with a line through it in the place my image should be. Again my html wont show my picture on my webpage. Here is the html code for my picture:

<img src="apollo13.jpg" alt="Apollo 13" />

Here is my file with everything in it: My file with everything (html, css, image)

I am using Windows 10 Please Help!! Thanks, Tyler.904

tyler.904
  • 19
  • 6
  • Are you able to view your image by http://yoursite.com/apollo13.jpg ? Also, the img tag does not have a closing slash. – Rob Mar 29 '16 at 21:20
  • When I click on that link (yoursite.com/apollo13.jpg) it says "403 Forbidden Request forbidden by administrative rules." – tyler.904 Mar 29 '16 at 21:22
  • Do you mean you clicked on the link I created in my comment? Or did you go to your site? – Rob Mar 29 '16 at 21:23
  • Sorry. My webpage is not published yet it is just an html document and when i drag and drop the document to my browser it wont show the image. – tyler.904 Mar 29 '16 at 21:23
  • The image needs to be in the same directory using the src you provided. – Shomz Mar 29 '16 at 21:24
  • Your question is a common one and you need to search SO to find those answers which are far too numerous here. – Rob Mar 29 '16 at 21:25
  • Sorry I am very new, but what do you mean "The image needs to be in the same directory using the src you provided?" – tyler.904 Mar 29 '16 at 21:25
  • In the same folder as your html file. Because your src contains only the file name, it will look for that file in the same directory as the html file. – Shomz Mar 29 '16 at 21:25
  • Yes it is in the same folder. – tyler.904 Mar 29 '16 at 21:25
  • Then you've probably mistyped the file name or extension. – Shomz Mar 29 '16 at 21:26
  • the image is in the same folder as my html file. – tyler.904 Mar 29 '16 at 21:27
  • @Rob `img` tags **do** have a closing slash... it's made optional in HTML5, but it's no error by any means. – Shomz Mar 29 '16 at 21:27
  • @Shomz img tags do NOT have a closing slash and you will not find it specified in the HTML docs anywhere, ever! That it is allowed because it's a void element does NOT mean it has a closing slash. In fact, browser vendors are specifically required to ignore the slash! – Rob Mar 29 '16 at 21:28
  • Here is my file with my html and my picture: – tyler.904 Mar 29 '16 at 21:31
  • @Rob http://stackoverflow.com/questions/15149641/do-i-need-a-at-the-end-of-an-img-or-br-tag-etc – Shomz Mar 29 '16 at 21:31
  • Yes, @Shomz and maybe you need to read the accepted answer you linked to as well as the HTML specs instead of trying to make an exception to the rule, the rule. https://developers.whatwg.org/edits.html#the-img-element – Rob Mar 29 '16 at 21:32
  • @Rob, I was just replying to your "anywhere, ever" part of that comment, not making rules, saying that that is definitely NOT the problem here. Let's not go offtopic here. – Shomz Mar 29 '16 at 21:34
  • Well just for anything, I took the slash out and made it Apollo – tyler.904 Mar 29 '16 at 21:35
  • That did not work either.... – tyler.904 Mar 29 '16 at 21:35
  • Yes please stay on topic and help me PLEASE! – tyler.904 Mar 29 '16 at 21:36
  • @tyler.904, what's the name of your file? With the extension. – Shomz Mar 29 '16 at 21:36
  • I never said it was a solution to the problem @Shomz. If it was, I would have posted it as a comment. Also: http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5 – Rob Mar 29 '16 at 21:36
  • How do i add an image on here to show you my folder with my html file? (a screenshot) – tyler.904 Mar 29 '16 at 21:36
  • Drag your image into the browser, and paste the url here. It's easier to read than an embedded image. – Shomz Mar 29 '16 at 21:39
  • @Shomz I posted it above in my question. – tyler.904 Mar 29 '16 at 21:42
  • I asked you to paste the URL for a reason, but there you go, you have a double extension. – Shomz Mar 29 '16 at 21:45

1 Answers1

3

Based on your screenshot, your PNG images have no extension, yet are recognized as PNGs, meaning you're hiding known extensions. So, that means the real file name of your image (which you refused to tell in the comments) is apollo13.jpg.jpg and the full html would be: 

<img src="apollo13.jpg.jpg" alt="Apollo 13" />

Or simply rename the file to apollo13.jpg (drop one .jpg).

Original screenshot for reference (you have quite a few files with double extensions):

enter image description here

Shomz
  • 37,421
  • 4
  • 57
  • 85
  • 1
    WOW! thank you so much i didnt ealize that! I am sorry for not saying my file name as i didnt realize i made that mistake... Thanks and my problem was solved! – tyler.904 Mar 29 '16 at 21:47
  • No problem, mate! Maybe you could disable the `hide known file extensions` option in Windows until you get a hang of it (you have things like `resume.css.txt` there). Here's how: http://windows.microsoft.com/en-us/windows/show-hide-file-name-extensions#show-hide-file-name-extensions=windows-7 – Shomz Mar 29 '16 at 21:47
  • Will do! Thanks again. – tyler.904 Mar 29 '16 at 21:50
  • I'm on a Linux machine at the moment, but it should be in: `Folder Options->View->Advanced Settings`, just uncheck `Hide extensions for known file types`. And to rename a file, you can right-click it and select Rename, or just select it and hit F2. – Shomz Mar 29 '16 at 21:55