13 How to display local images in HTML

Last updated on July 13th, 2020 at 07:06 am.

13 How to display 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="https://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.

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.

An image stored in a folder called img , which has a file name of , image.png , can be accessed as follows:

<img src="img/image.png" alt="Image sample" title="Hi">

Explanation:

First you will access the folder . img , then the image inside of the img folder, image.png . Read more about accessing images in folders in the next post.

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="https://bizanosa.com/myImage.png">  

Next post: Display Images in a folder >>

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:

Next post: Display Images in a folder >>


Discover more from Bizanosa

Subscribe to get the latest posts sent to your email.

Comment Here

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!