<Img src="C:/users/john/downloads/download.png"> from my local drive is not working...?

Question

1.00/5 (2 votes)

See more:

hi friends,

i have little bit doubt for img tag in html . actually i was tried this same code in Notepad there that image was shown perfectly.

but this same code i was tried in my project page like student.html page. there i have used this same code but the image was not loaded which has shown in console . why this image has not loaded in my page i have given entire code what i have tried please tell me if anyone knows

Notepad:

<html> 
<body>

<h1>hi </h1>
<h1>New Image</h1>
 <img src="C:/Users/john/Downloads/download.png" alt="" \> 


</body>

</html>

What I have tried:

this was working perfect in notepad. but not working in my project html page using this same code

Posted 14-Jun-17 22:10pm

Member 11183217

Updated 6-Jan-21 20:58pm

Add a Solution

4 solutions

Solution 1

I believe you are missing the file:// code before the path so it should be "file://c:/Users/john/Downloads/download.png"

You should also ensure that you are only wanting to do this temporarily for a local html file and not one that is hosted somewhere. It is far better to design a page and have all the images in the right location so that you can use the referential mapping for the src values.

For example...
Your website is located in c:\Users\John\Downloads\TestSite
Create a subfolder called images and copy the image download.png to that folder.
Now you can set your IMG tag to be

HTML

<img src="/images/download.png" />

Posted 14-Jun-17 22:29pm

Stuart Jeffery

Updated 14-Jun-17 22:33pm

v2

Comments

Member 11183217 15-Jun-17 5:18am

hi stuart actually i want to tell you clear questions. my task was image upload and save by using web api and angulajs . my point and questions i have given ....

1. i have 2 solution. one is UI another one is Web API solutions both are different places
2. i partially completed by using server.mapPath("~/Images"). but when i save the image it will be save to API project folder like E:\johnPlayer_API\content\Images.
3. my UI path was like D:\johnPlayer_UI
4. i saved this image API path to DB. how to get and display the Image from API folder path to UI page

Stuart Jeffery 16-Jun-17 4:21am

It sounds like what you actually need to do is write some backend code for the upload procedure to move the file to a relevant folder. As a later option has said you cannot use direct paths unless you are using the file only on your pc and pretty much just to test images. In a production environment you need to have referential links to files within the folder your site is in.
As you are aware between your sites that there are 2 paths providing the IUSR account for the uploading site has access to the folder for the other one you can upload and move files between your sites. If you want to maintain a certain level of security then create an upload folder in the first website and create a windows service to run on the server that watches that folder and moves new files to the other sites Images folder. This would maintain site security whilst still giving you the solution you are trying to achieve but it does require more work.

Solution 2

First, change the closing tag to "/>" from "\>"

The "lack of display" is probably that the webpage is not being run from your user ID, so access to "Users/john" is probably being denied. Try moving the image to a "neutral" folder that has full access permissions for all users and that will probably fix it.

Posted 14-Jun-17 22:30pm

OriginalGriff

Comments

Member 11183217 15-Jun-17 5:19am

Thanks Giff, actually i want to tell you clear questions. my task was image upload and save by using web api and angulajs . my point and questions i have given ....

1. i have 2 solution. one is UI another one is Web API solutions both are different places
2. i partially completed by using server.mapPath("~/Images"). but when i save the image it will be save to API project folder like E:\johnPlayer_API\content\Images.
3. my UI path was like D:\johnPlayer_UI
4. i saved this image API path to DB. how to get and display the Image from API folder path to UI page

Solution 4

I have tried a lot of techniques and finally found one in C# side and JS Side. You cannot give a physical path to src attribute but you can give the base64 string as a src to Img tag. Lets look into the below C# code example.

ASP.NET

<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>

C#

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);
}

Posted 16-Jul-20 0:21am

Member 12318492

Comments

Richard Deeming 16-Jul-20 6:27am

Far simpler to host the image in a path that's visible to the web, and reference it properly as shown in the previous solutions.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2017-06-15T06:36:00

You are specifying a local path for the image. Even if the browser allowed you to load local files into your page (they don't), it would be trying to load that image from the user's file system.

It's highly unlikely that the user will have a file with the same path and filename as the file on your server. And even if they did, it's not going to be the same file.

But that's irrelevant anyway, because browsers do not allow websites to reference files from the user's local file system. This is for security reasons, to prevent a malicious site from reading the contents of your computer without your knowledge.

Instead, you need to load the image using an HTTP or HTTPS path. This can either be a full URL, an absolute path on the current site, or a path relative to the current page. For example:

HTML

<!-- Full URL: -->
<img src="http://www.yoursite.com/images/download.png" alt="" />

<!-- Absolute path: -->
<img src="/images/download.png" alt="" />

<!-- Relative path: -->
<img src="../images/download.png" alt="" />

<Img src="C:/users/john/downloads/download.png"> from my local drive is not working...?

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us