HTML Image Not Showing in Web Browser - FIXED

How to fix HTML Image not showing up in the Web Browser using Notepad++. This tutorial will show five different issues that can cause images to not show in Google Chrome/Safari or other web browser. We will see what to do when image is not displayed in HTML, and you see broken image icon on your webpage. This tutorial is meant for beginners level html learner.

#HTMLImageNotShowingUpInWebBrowser #FixBrokenHTMLImages

Get the sample html file and images from this github page.

00:00 Introduction
02:50 HTML Image Not Showing up from Same Folder?
03:30 HTML Image Not Showing up from Folder One Level Up?
05:53 HTML Image Not Showing up Due to Space in Image Name?
07:30 Case Sensitivity in HTML Image Tag Issue?

[tickmop]

Hello Amit, I am a beginner vs code user, and for puzzling reasons, my image doesn't show up. I have a Food file with images, html, ccs, and Java inside of it. My code to show the image is <img class="food-img"/>. Can you help me fix the problem? Also, I would be really grateful if you show me how to share a code snippet?

[tameikablake]

Thank you so much! You help me resolve my issue!!!

[ashenkp]

This is the only method that worked for me. Thanks :)

[dreamer]

It is in the same folder yet the browser won't show it.
I've even mentioned the path right.

Nevermind, I was able to solve it. Thanks for the help! I tried the other methods as well!

[marldanes]

Too much talking jumping from 1 topic to another

[HitItPluck-viqn]

Can i not use the <img> tag on chromebook?

[kelliereviews]

tyvm, that helped alot. I wasn't sure why my images weren't displaying. NOW they are! 😉

[manashad]

thank you this helped so much Chris i realized i mispelled src lol

[manassehsmith]

Thank you very much. This was really helpful. Problem resolved.

[Oddpistachio]

You could drag and drop the image into your Text Editor, and it'll copy and paste the file path for you. I know it works on a Mac, but I would guess it works on Windows, too.

[vtaesan]

THANKS A BUNCH, it's very useful for me

[umair.g]

mjy ak hafta sy pta nhi chal rha tha k path kaisy dety hen apny b jo btaya wo diffrent h but meny jo find kiya wo different h. image k titel men koi (.jpg ya .png) nhi hona cahiye but jab aap path men pic ka name likho gy to wahan aapko define krna pryga k meri pic png ya jpg h maslan, image titel h ( h20) or iski details men dekho to ye jpg ya png hogi . to jab aap file men attest krogy to wahan aap likho gy (h20.png) ya (h20.jpg)

[dethijs]

What helped for me was to go to: Open folder, folder with project, in my program (which is Visual Studio Code). After that all the issues were gone.

[msa]

I downloaded the zip file but when i right click, it dosent show any option to open using notepad++

[oncloud]

My image is showing in the web page but when I am transferring it to a pen drive the image is not showing and stating "some pictures have been blocked to help prevent the sender from identifying your computer. Open this item to view the pictures "
Can you please help me?

[nithishnagendra]

how do u rename the image downloaded from whatsapp to .png? usually it will say at the beginning " whatsapp image and some random numbers so how do we convert it to png format?

[grantmejloumian]

very helpful tips ! thank you so much!

[rusvlad]

Hi, well the problem is after i will update the image online. On the PC as i make test, it works.

[daniyals]

It's online image url and when i open the file in browssr with live server, image do not show

[caroljynx]

My index is loading well on browser, but when I click home page, there is nothing 404 error, is responding static/index.html, why is it asking for index.html in static files and how can I rectify that?