13 How to display local images in HTML

13 How to display local images in HTML

13 How to display local images in HTML

 

In the last post we looked at somethings about the <img> Tag. You learned about various attributes that are part of the img element.

We also added the following html code, which should display an image from an external source.

<img src="http://lorempixel.com/400/200">

 

Even though the above code brings in an image from an outside source. We can also embed images from within our server. Simply, it can be done using the code below:

 

<img src="myImage.png">

The src attribute will hold the name of the image. The file where the above image will be embedded, will be in the same location as the image to be embedded.

 

Join the FULL HTML and CSS Tutorial Here >>

 

In the next post we’ll see a little more about embedding images which are in deeper or outside directories. We’ll see how to embed images which are not in the same folder/directory as the html file where it should be embedded.

Absolute path

For the above image source, you may use the absolute url for the src attribute as shown below. However this will only give the browser more work in trying to resolve the domain details. Let’s say the image was on my domain bizanosa.com, I can use the absolute path of the image as follows:

 

<img src="http://bizanosa.com/myImage.png">  

HTML5 <figure> and <figcaption>

The <figure> and <figcaption> are HTML5 elements that you may use to add a caption to your images. And they will clearly link a caption to the relevant image.

Before writing the code for the caption and the image let us talk about these two elements:

<figure>

Used for representing a self-contained content , specifically such as an image, illustrative content, diagrams such as pie charts, maps,  code snippets and so on.

 

<figcaption>

This adds a caption to the object added by a <figure> .

 

Example with Caption

<figure>
<img src="myImage.png" alt="My Sample Image"
width="500" height="300" title="A sample image">
<figcaption>Just a sample Image.</figcaption>
<figure>

 

 

If you want to learn HTML and CSS from scratch, use the button below:

Join the FULL HTML and CSS Tutorial Here >>

 

 

The following two tabs change content below.
Just a geek who loves Trance . Be yourself everywhere you go. And Be yourself in everything you do. Cheers !

Comment Here