Embedding image in html

Hello gays , my other code is running properly u can se in the image properly ,but the photo is not showing properly , it showing only general photo logo :roll_eyes: :slightly_smiling_face

Screenshot (1037)

What is the location of your image you have mentioned? Is it in the same directory as the html file?

1)check if the image you want to appear on page shoud be saved in the same folder as of your code zip file if your using image _name.png directly
2)If your image is not in the same folder then you have to put full address location of image from your PC.

The basic syntax for including an image in HTML is:
<img src="path-to-your-image">
<img src="img_chania.jpg">

Try these:

  • Make sure the spelling is correct. They are Case Sensitive!
  • Writing the full path in src= i.e include any extensions .png, .jpg etc.

Additionally you can add an Alternative text or inline CSS Styling:
<img src="img_chania.jpg" alt="Flowers in Chania">
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

Hello. So the issue here might be because you have used the wrong extension of the image. Check the properties of the image and make sure whether it is a .jpg or .png extension. Likewise, make necessary changes in the code.
image source.jpg if the image has .jpg extension
image source.png if the image has .png extension

The photo that you want to display should be in a single folder along with your html file otherwise the website will not show your image.
If you don’t want to have the photo in the same folder then you have to give the photos location for the photo to be visible.

the syntax of embedding an image in HTML is:
<img src="path of your image>
src(full name, source)=this attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL
the image could be broken for many reasons like the image might not exist, it might not be named properly, or the file path in the code might be incorrect.
I hope this point helps you to fix the broken image:-
1)make sure your syntax is correct.
2)make sure the spelling of the file or path name is correct. Little things like dashes instead of underscores can cause a broken image. (Check the Filename and extension)
3) make sure that the image is placed on the same path where the HTML file is.
4) make sure the image is exists

bro , does the directory of the photo is also matter with html file.

Yes @shashwatpal2001 the directory is must because only through that the image will be displayed in the browser.

C:\Program Files\Sublime Text 3 , this is my { html path }
and this is my code ,

but is now also not working

this general picture icon is showing till now

@shashwatpal2001 can you share the screenshot of the file directory structure. It will be at the left part of the editor where you can see the files of the current working directory.


there is no need of it , by the way thanks for supporting .Now the problem is getting resolvd
Actually i am not saving the image to the html saved folder file .
:sweat_smile: :sweat_smile: :sweat_smile: :yum:

1 Like

Great, sometime silly mistakes really creates problem :grinning:

1 Like

actually it’s just my beginning ,
sometime i do mistakes thereafter learn from it ,
That will be the real improvement from my point of view .

Thanks :grinning:

1 Like

THANKS A LOT!! I found it helpful.

1 Like