Doubt-Embedding images in HTML

Hi sir/ma’am, This is Thoushiq, studying at Whitefield Global school. I’m not able to see the image in the expected output and it shows like this in the below image. Please check this image and tell the solution on how to add the image in the HTML editor.

Screenshot 2022-06-26 202631

Hi Thoushiq,
The screenshot you shared is not visible to us.
But having said that, let me help you with the correct syntax for putting an image in html file.
SYNTAX: < img src =“path of the image”>
eg : < img src=“bolt_logo.JPEG” >

If you are having issues with image size, then you can use the ‘width’ & ‘height’ attribute as shown below -
< img src =“bolt.JPEG” width=“236” height=“62”>

Furthermore, you can add ‘alt’ attribute to deal with users accessing your webpage with bad connectivity. ‘alt’ attribute can display a text in place of the image to describe what the image was about.Here is an example:

< img src =“bolt.JPEG” width=“236” height=“62” alt=“Bolt logo” >

Feel free to reply if you are facing any other issue.

Thanks a lot for this help.

1 Like

Hi, I actually tried two ways:-

  1. < img src =“bolt.JPEG” width=“236” height=“62”>
  2. < img src =“bolt.JPEG” width=“236” height=“62” alt=“Bolt logo” >
    But none of them worked and it shows like this:-
    [file:///C:/Users/Thoushiq/Downloads/message%20for%20BoltIot.pdf](file:///C:/Users/Thoushiq/Downloads/message%20for%20BoltIot.pdf)

Hi @thoushiqn ,
The screenshot you shared is not visible. I would recommend you upload the same on Google Drive and share the link with us.

Remember, file names are case-sensitive. bolt.jpeg is not the same as bolt.JPEG and .jpg is not the same as .jpeg, even though they are extensions for the same format. Please check the same.

Tried this then also not working.

Hi Thoushik,
Are you keeping the image files in the same project folder?
If you are keeping it in the same project folder, then only you can use the above syntax. Otherwise, you have to provide full image path in the ‘src’ attribute.

Hope this helps!

@thoushiqn kindly share your code, if you can’t post the screenshot, just paste it as text.

It is in the same file where I save the HTML programs.

@thoushiqn kindly close the image tag.

<img src="KGF_yash.jpg"width="1120"height=“630”>

Also if you are not able to share a screenshot, please upload the same on Google Drive and share the link here. I need to see a screenshot of your file structure and code if it doesn’t work.

https://drive.google.com/drive/folders/1cMSezAXVKAGVBsC_adkADm1Phs-H2TFB?usp=sharing
:point_up: The above link is the link for the output of the entered program and the picture.

@thoushiqn which browser are you using? I guess your browser is not able to render the image. I would recommend you use the latest version of Google Chrome.

If that is not working , you can try pasting the link of the image directly from the browser , do not download the image.
Example:
<img src = "https://th.bing.com/th/id/OIP.Ix6XjMbuCvoq3EQNgJoyEQHaFj?pid=ImgDet&rs=" ></strong></em><br> Hope this helps</p>

Try using VS code and install the html extension on it, you can create .html files on it and add image tag just by typing img and it will autocomplete the rest of the code for you, then add the path of the image to the source of the tag.