The images can be used in HTML files to display some important graphs, images, and information. The images can be displayed in multiple ways based on the requirements of the developer. To include images in an HTML page, the <img> gets in handy in which we can set its width, height, and styling using various attributes provided.
This article will demonstrate the following methods for adding images from a URL in HTML file:
How to Add an Image from an External URL?
Adding an image from a URL is the most effective one as we do not have to download the Image into the Local directory and then include it in the HTML file. Follow the below steps to include an image from the external URL.
Step 1: Create an HTML File
Create a new HTML File and create a div element in which later the image is going to be placed:
<h2>HTML Image from Local Directories</h2>
<p>The image path must be accurate</p>
</div>
Step 2: Add Images from External URLs
To insert an image from any external URL you first must get the exact image URL and paste it in the “src” attributes inside the image tag:
<img src="https://images.unsplash.com/photo-1512820790803-83ca734da794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=898
&q=80"
alt="book image" width="auto" height="200px" style="border: 3px solid gray”>
The attributes of the “img” tag are described below:
-
- “src” contains the image path.
- “alt” added a message of the book image.
- “height” sets the image height to 200px.
- “width” sets the horizontal width of the image to auto.
- “style” sets the gray-colored solid border of 3px.
Our webpage will look like this after saving the HTML file:
Bonus Tip: Add Images from Local Directories
To add an image using the “<img>” tag, the “src” contains the path of the image relative to the HTML file.
For example, if the image file “bookbg.jpg” is placed inside the “images” folder then the path inside the src attribute would go like this:
The whole code snippet would look like this:
<h2>HTML Image from Local Directories</h2>
<img src="images/bookbg.jpg" alt="book image" width="auto" height="200px">
<p>The image path must be accurate</p>
</div>
Our webpage will look like this:
Hence, the local image is imported into the HTML file successfully.
Conclusion
To insert an image from “URL”, copy the address of that image from the browser and insert it in the “src” attribute of the “<img>” tag. This article demonstrated how we have added an Image from a URL and from the local directory as well along with the proper demonstrated examples.
