Click here to Skip to main content
14,875,113 members
Please Sign up or sign in to vote.
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
Updated 6-Jan-21 20:58pm

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" />
   
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.
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.
   
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
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="" />
   
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);
}
   
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.

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

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900