Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set src to the img tag in html from the system drive?
To use an image on a webpage, use the <img> tag. The tag allows you to add image source, alt, width, height, etc. The src is to add the image URL. The alt is the alternate text attribute, which is text that is visible when the image fails to load.
With HTML, you can add the image source as the path of your system drive. For that, add the src attribute as a link to the path of system drive where the image is stored. For example, file:///D:/images/logo.png
Important Security and Browser Limitations
Note: Modern browsers restrict local file access for security reasons. The file:// protocol may not work in most browsers when loading HTML from a web server. This approach only works when opening HTML files directly from your local file system.
Img Tag Attributes
The following are the key attributes of the <img> tag:
| Sr.No. | Attribute & Description |
|---|---|
| 1 |
src The URL or path of the image (required) |
| 2 |
alt The alternate text for the image (required for accessibility) |
| 3 |
width The width of the image in pixels |
| 4 |
height The height of the image in pixels |
| 5 |
title Additional information about the image (tooltip text) |
Example: Using Local File Path
You can try the following code to set src to the img tag in HTML from the system drive:
<!DOCTYPE html>
<html>
<head>
<title>HTML img tag</title>
</head>
<body>
<h2>Local Image Example</h2>
<img src="file:///D:/images/logo.png" alt="Site Logo" width="100" height="100">
<!-- Alternative: Relative path if image is in same folder -->
<img src="logo.png" alt="Logo" width="100" height="100">
</body>
</html>
Alternative Approaches
For better compatibility, consider these alternatives:
-
Relative paths: Place images in the same folder as your HTML file and use
src="image.jpg" - Web hosting: Upload images to a web server and use HTTP URLs
- Base64 encoding: Convert images to base64 strings for embedding directly in HTML
Key Points
- The <img> tag is self-closing (no end tag needed)
- Always include the
altattribute for accessibility - Use forward slashes (/) in file paths, even on Windows
- The
file://protocol requires three slashes:file:///
Conclusion
While you can reference local system files using the file:// protocol, this approach has significant limitations in modern web development. For production websites, always use web-hosted images or relative paths within your project structure.
19K+ Views
