CODEWITHSUNDEEP
htmlpng
Ezekiel Rivera
Ezekiel Rivera

Reputation: 71

Why are png files not appearing in html

I have a logo that i am trying to make appear in my html page. For some reason it wont appear on my webpage. When i loud my webpage all i see is a square box with an x on it were the picture should be.

  <img src="/images/DigitalMonster-logo.png" />

That is the code im using to have the picture display from my hard drive. Any reason why it wont show up on my website? Also if you need the full html code let me know i will provide it thankyou.

Upvotes: 5

Views: 65011

Answers (5)

balaji
balaji

Reputation: 11

Check this steps its working for me:

  1. Right click on the image and select properties
  2. Then if you find an option "unblock" then click on it (sometimes computer blocks some images, hence on the google chrome or internet explorer it won't display)

enter image description here

  1. Check the following details are correct:

  • HTML syntax of html

  • path name

  • file name

  • extension of image

sample syntax:

<img src= "drivename:\foldername\filename.png">

Example:

<img src= "E:\Web_development\baby.png">

Here

"E" is the drive name "Web_development" is the folder name "baby" is image name "png" is extension name

Upvotes: 1

Varun B G
Varun B G

Reputation: 1

If the images folder is in the same directory as your html file then your path will be images/DigitalMonster-logo.png instead of /images/DigitalMonster-logo.png

Upvotes: 0

Minhaj Mv
Minhaj Mv

Reputation: 11

  1. Open your image in web browser
  2. Copy image path from web browser
  3. Paste it in your code(inside src)

Upvotes: -2

Aleksander Rezen
Aleksander Rezen

Reputation: 927

Path /images/DigitalMonster-logo.png assumes you have images directory in very top of Document Root (absolute path). if you will change /images/DigitalMonster-logo.png to images/DigitalMonster-logo.png, this will assume your images directory is in current working directory, (relative path).

Upvotes: 5

FrenchTechLead
FrenchTechLead

Reputation: 1156

You need to check if the web navigator is getting the image back, if you are using chrome press ctrl+shift+i and go to Network tab, than reload your page if you are getting status 200 for /images/DigitalMonster-logo.png that means that the web navigator is receiving the image but not showing it, if status is 404 that means that the path to the image is incorrect

Upvotes: 7

Related Questions