How to give src to the 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

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.

Answer 3

I want to display my image in the web page using html

If you are showing the image from your web page, the image file has to be on your web server only.
You can not show it from your local system, as the file is Displayed from web server only.

Answer 4

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 5

when you webpage loaded in visitors with their browsers in internet

your image path in img tag just point to thier filesystem localtion not your file systemlocation

you must upload your img in your webserver like apache or iis or host location and set path of img tag with this public image path

for more detail you can search about client server concept in internet and web

but if you mean in your browser did not show its relate to security issues

be successfull

Answer 6

You can't achieve that, Or you shouldn't achieve that. Linking to files on your computer will not work when you upload the website. You should move the images into the same folder as your index.html or make a folder in the same folder as your index.html then you can refrence the file like this:

<img src="Images\TechnipLogo.jpg" />

Answer 7

Well, as there are many issues with different browsers and so with Apache paths config, I tried all the possible ways file: file:// c: c| and none of them worked on my Firefox 57.0 in W7, so there is a fast solution (if you use php). Just call a file "embedIMG.php" with this content:

  <?php

     $file = $_GET["imgg"];
     $type = 'image/jpeg'; // or whatsoever
     header('Content-Type:'.$type);
     header('Content-Length: ' . filesize($file));
     $img = file_get_contents($file);
     echo $img;

     exit();

 ?>  

Call this "embedIMG.php" from your img tag:

   <img src="embedIMG.php?imgg=THEPATHTOYOURIMAGE">

THEPATHTOYOURIMAGE will be the path to your image "D:\Images\TechnipLogo.jpg", it's better to do it this way "D:/Images/TechnipLogo.jpg" with common slashes on Windows. If you have spaces or special characters in your path you will have to declare it with urlencode() function:

  <?php  $THEPATHTOYOURIMAGE=urlencode($THEPATHTOYOURIMAGE); ?>

Answer 8

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