How to give src to the <img> tag in html from the system drive?

Question

I want to display an image on a web page using HTML <img> tag.

I have stored the image on my local drive.

How to achieve this?

The code:

<img src="D:\Images\TechnipLogo.jpg">

Image is not displayed.

Answer 1

You must use the correct local path from your PC and the correct Drive letter. Then change the backslashs () to forward slashes (/) and add file:/// before the path, so:

<img src="D:\Images\TechnipLogo.jpg">

becomes:

<img src="file:///D:/Images/TechnipLogo.jpg">

**Also, please note that in Chrome and possibly other browsers, you may not be able to use a local file/image on a site that is not locally hosted. Please reference this post: Cannot open local file - Chrome: Not allowed to load local resource

Answer 2

You can look into my answer. I have resolved the issue using C# language Why can't I do <img src="C:/localfile.jpg">?

<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>
                        if (File.Exists(filepath))
                        {
                            byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
                            string base64ImageRepresentation = Convert.ToBase64String(imageArray);
                            var val = $"data: image/png; base64,{base64ImageRepresentation}";
                            imgEvid.Attributes.Add("src", val);
                        }

Hope this will help

Answer 3

Your image should be on a relative path not absolute one.

Say your html file is in D:\myhtml\home.html. Copy the Images folder in myhtml. Then change your code to <img src="Images\TechnipLogo.jpg" />.

Hope this helps

Answer 4

What you are trying to accomplish is a security feature present in all modern browsers.

You could do that only if you run the html file stored locally - it will not work once you deploy it to a web server.

If you really MUST do that, you could build a browser extension - Firefox extensions and IE extensions can access local resources. Chrome is much more restrictive however.