Adding pictures to HTML

Projects
,
1

Please help me add pictures inHTML. I am using Sublime Text Platform. I am using src tag but the image is not coming.

2

Common mistake is path , please check image location and type.
Please share snippets of your code.

3

Hi @arushi.sa24,
It may be the case that the path to the image you are trying to load is incorrect or the name or extension. Do share your code, also share a screenshot of contents of the folder containing your HTML and Image files. Given below is the syntax for loading an image.

<img src="image.jpg">
4

Hii @arushi.sa24
<img src="wallpaper.jpg" width="400" height="235" alt="an image with a quotation">
This is the basic syntax to add an image in web page.

  • img tag is a inline element and also a standalone tag, src(source) attribute functions just like href attribute where we should provide a url. It must be set to a value which can be a direct URL of any image present on web /or name of a folder which is under the same directory.

  • The value inside the alt attribute will be displayed on site in place of image when image doesn’t reload.

  • Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

This is all you should be knowing to add picture in html. Please kindly go through all the points.
Hope this reply is helpful :slightly_smiling_face: and clarified your doubt.

5

Once check ur image path and make sure you have written correct path in ur code.
Check the syntax also.

6

Hey @arushi.sa24
First of all, save the image in the ‘Coffee Shop’ folder if you are following the video. Then note down the extension of your image. Mention the same extension in the src.
For example, if the image name is coffee_cup and the extension is .png then the tag should be:

Later on you can add other attributes like height and width to explore more.
Hope it helps :slight_smile:

7

Thanks for the help. I’ve got it now!