I am trying to display an image from "C:\temp". Here's the code:
string root = "C:\temp\";
string[] files = Directory.GetFiles(root);
foreach (string f in files)
{
if (Path.GetFileName(f).Contains(user.WorkEmail))
{
img1.ImageUrl = root + Path.GetFileName(f);
}
}
If an image is not found, I get a thumbnail with a red "X" - fine, as expected.
If an image is found, I get a thumbnail but no image gets loaded/displayed. When I right click the thumbnail and go 'Properties' it shows the correct filename.
You need to make this image part of the web site in order to display it properly. You need to use a relative URL:
img1.ImageUrl = '/App_Data/foo.jpg';
The image file cannot be located anywhere, when it is part of the web site a separate request is made to the server to fetch the image which is served by IIS. If you want to use image files located in a folder outside of your site root you will need to write a generic handler which will read the image contents, stream it to the response with correct content-type and then point the ImageUrl to this handler.
looks like you're creating strings of the form "C:\temp\myfile.jpg", right?
That's not a valid URL. your address needs to be either relative to your website's root (e.g. /content/myfile.jpg) or else it needs to include the protocol (e.g. file://c:\temp\myfile.jpg for local files or http://mysite.com/content/myfile.jpg for web access)
i had that problem and solved it ...
you should give the image adres cut
e.g:
www.yoursite.com/folder/image.jpg
Your image source should be = "folder/image.jpd"
No need of root or website.
Related
I have an issue that seems like a very common requirement, but I'm unable to find any help. Let's say I have an authenticated user uploading private photos to non browsable folder on my server. Each user has their own folder in a large file store, like...
/FileStore/{UserId}/Photos/my_cute_cat.jpg
The file is uploaded and I save a thumbnail of the photo like...
/FileStore/{UserId}/Photos/Thumbs/my_cute_cat_thumb.jpg
That user wants to download their photo. No problem...
User sends a request to download
I authorize the user and make sure they own that particular photo
I serve the file
I need display the thumbnail in a plain old img tag on the user's dashboard. The /Thumbs/ folder is not set up to serve static images. I don't want the /thumbs/ folder to be able to serve static images because they should only be visible to authorized users. What am I supposed to do?
If its just a small thumb nail, consider using embedded base64 image with more details here:
How to display Base64 images in HTML?
You can pass base64 down to the View by encoding the file into a base 64 format as a string explained here:
http://www.devcurry.com/2009/01/convert-string-to-base64-and-base64-to.html
Using this approach or even using a FileActionResult to serve the file through a controller has the big disadvantage of not being able to use a CDN to deliver the cached content. What you can do to help with this is still serve the images statically but give them obscenely long random names which is unguessable. When someone requests the image from you, then you simply provide them with the unguessable url.
First and foremost, if a static file should not be available to the whole world, then your web server should not serve the directory it is in at all. Nothing else will do on that front. If the directory is served, then the image can leak.
That then presents the problem of how to allow the user to access it. The simple answer there is that you need an authorized action that returns the image(s). Basically, that's going to look something like:
[Authorize]
public async IActionResult Image(string image)
{
var file = $"/FileStore/{User.Identity.GetUserId()}/Photos/{image}";
if (!File.Exists(file))
return NotFound();
return File(file);
}
Now, obviously, I don't know about your "FileStore", so the exact code here may need to change. The general idea is that you simply see if this file exists under the user's directory. If it does, they can have it. If not, they don't own it. You also should probably add in a bit more security, such as restricting the image param to only image types, so someone can't try to pull just any arbitrary file. They'd still have to somehow manage to get some aberrant file there, in the first place, but just in case it's better to not take chances.
The return methodology may need to change as well. Right now, I'm assuming a file on the filesystem of the server, so I just return a FileResult with the path. If you're pulling it from some sort of storage account in Azure, AWS, etc. then you'd use HttpClient to make the request, and then you should stream the response from that directly to a FileStreamResult.
I've not tested on linux, but if you make a folder where you have you pictures, you can actually just create a controller method that returns a file. Now, even if you are using a view served from another method, you can still call this file method from this razor view and display the image.
in controller called App I serve the image from a folder called Documents:
public IActionResult File(string id)
{
if (String.IsNullOrEmpty(id))
{
return PhysicalFile(Path.Combine(_env.ContentRootPath, "Documents", "Wrong.png"), "image/jpg");
}
return PhysicalFile(Path.Combine(_env.ContentRootPath, "Documents", id), "image/jpg");
}
in razor (using a bit bootstrap):
<img src="~/App/File/#profilePicture" class="img-fluid" />
use the location of your method that serves the file.
The new TinyMCE 4.3 Image Tools (eg when cropping) saves images as blob data instead of image files in a directory. the edited mage url is like
blob:http://www.example.com/f2953aa1-e64f-49e1-a6e3-a283986663bf
I want to upload the image file to a specific folder and then use it as regular image referance / path.
Note
The question I am going to put is similar to Image edit issue. but the answer to this question is not working. I also tried http://archive.tinymce.com/forum/viewtopic.php?id=35740 solution but not working because it produces always same name image name.
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
I've spent a while trying to find out whether what I want is possible.
I have 3 websites on different domains. Two are in English, one in French. We have one page in english, one in french which are identical apart from the text. These pages and relevant images (we'll call common content) are stored on a separate domain (reasons beyond my control) and use response-writefile to insert the content into the two english pages.
Got all that working fine. However, the images in these common pages have a path relative to domain on which they are stored, which means when the pages are written into the main pages, the images dont show. I understand why and can get around it by putting in the full path of the image.
I would prefer not to go through every single page changing the image path, is there any way of the server knowing or being told that the image is relative to the common content and not the rendered page?
I wouldn't have thought so, but it would save my day if there was!
Further explanation:
Relative path of image:
abc.png
Path of common content file:
http://domain1.com/CommonContent/123.html
Code in final pages (domain2.com/english.html):
<% Response.WriteFile("/CommonContent/123.html"); %>
Rendered path of image (what I don't want):
http://domain2.com/abd.png
Ideal path of image in rendered page: ie, what I want to happen:
http://domain1.com/CommonContent/abd.png
what you can do is use WebClient class to get the page content
String URI = "http://domain1.com/CommonContent/123.html";
WebClient webClient = new WebClient();
Stream stream = webClient.OpenRead(URI);
String request = reader.ReadToEnd();
then you perform a string replace, here I'm not sure what can match, maybe something like this can match:
request.Replace("<src=", "<src=http://domain1.com/CommonContent/")
then you render this string to the browser.
You can make Application Settings having the path for each domain on each application, and then maybe add a function that will be in charge of writing the full path of the pictures. Also you can make an HTTP Module to address this issue as well as a Generic Handler that will receive all requests for images and load them from different domains/applications.
Good luck!
I am using ASP image control for image display or HTML image control for that, I want to set the image URL of image that is outside of our web application's root directory...
On Which way this is Possible???
You can use Response.WriteFile to serve the image file from a custom handler.
Response.ContentType = "image/jpg";
Response.WriteFile(#"c:\images\myimage.jpg")
Response.End();
Alternatively you can also achieve this using a custom VirtualPathProvider. This allows you you remap specific paths to alternative streams, whether it's the database or another location.
If your application is a child application in IIS, and you actually just want to reference a parent image, just use a slash to get back to the root, /myimage.jpg, or an absolute path to reference a different application http://www.myotherapp.com/myimage.jpg.
I have a web page that will display an image.
I created a folder within my website called 'photo' and uploaded that image to that folder using the following code:
string path = Server.MapPath(#"~/Photo/");
FileUpload1.SaveAs(path+FileUpload1.FileName);
I am using the following code but the image is not being displayed in the image control.
string path = Server.MapPath(#"~/Photo/");
Image1.ImageUrl = path + photoInfoObject.Photo;[photoInfoObject.Photo is a string of the name of the photo(eg: Penguins.jpg).]
still that image is not displaying.can anyone fix this?
Your code looks ok so this is probably a broken link to your image, for example you may be rendering an absolute path to /Photo/Penguins.jpg, whereas if you're using the build in Visual Studio Web Server with a virtual directory, the absolute path would be /Your Site Name/Photo/Penguins.jpg. So check the generated HTML to find out the path, and maybe use the "Net" panel inside the Firebug plugin for Firefox to easily see any 404 errors as the page loads.