Fairly straightforward question, I have images stored in my database as varbinary and would like to provide a link to these images rather than displaying them on the website. When a user clicks the link he/she should be able to download the image.
An image is served in response to a request.
<img src="?" /> <!-- what goes here? -->
You need to create an HTTP handler to receive requests for these images.
A handler is an executable available at a specific URL which can respond to your request; in this case, by serving the binary data of an image. An ASPX page is a valid handler, though there are more efficient handler types for images.
<img src="MyHandler.aspx?imageId=123" />
The handler should do a few things:
validate that the ID is valid and that the caller has permissions (if needed)
retrieve the image from the database
set appropriate response headers
use Response.BinaryWrite() to send the binar data to the client.
Note that if you are using ASP.Net MVC, you can use a controller as your handler.
An alternative method is to base 64 encode the bytes and embed them directly in the image tag.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
This is a useful technique for small images or when the expense of multiple requests is very high.
See: http://en.wikipedia.org/wiki/Data_URI_scheme
More reading:
Dynamically Rendering asp:Image from BLOB entry in ASP.NET
Dynamic Image Generation
You should create a page that takes an image-id and returns the image.
You may consider this question:
Display image from a datatable in asp:image in code-behind
I had a similar problem an that answer solved my question. Beside that, you can use binaryimage component from Telerik:
http://www.telerik.com/products/aspnet-ajax/binaryimage.aspx
Related
recently, I've been developing a website with .NET c# and I've been trying to display images via the imagepath in the db. It is currently working by this line of code.
return File(byte array, "image/jpeg");
The problem is that by this line of code the layout page is completely ignored as only the image with white background is shown. I need to display the image along with the return view (the image inside the layout of the website). thx
The reason you're not seeing anything is because you can only have one type of response per request; Either a response containing HTML or a response containing the image.
What you need to do in order to serve images via your application is set up a route that you can put in your <img> tags as the src attribute.
<img src="/static/images/123">
Your route would listen for requests on the /static/images/ path and then try to parse the ID number at the end. It could then take that ID number (123) and look up the relevant image in your database.
So, to be clear, you'd have at least two requests that occur; First, you serve the request for the page, then you serve subsequent requests for the image(s). These two request handlers do not share the same code.
Finally, if you really wanted to "inline" an image as part of the page response, The only way you can "inline" an image into a page is to base64 encode it and set that as as the src of an <img> tag. This process is slow and bloats your HTML, making it take longer to load.
I have an image folder in my project solution. I capture the image for a customer and i keep it in it. After i fill the details I redirect to another aspx page and i take the pic and come back to registration page and map the image to an image button i am using session variable to map the image path which is in the image folder. My problem is I get the same image even if i take a new pic. I am keeping jus one pic at a time in the image folder why do i get the previous image which is not in the image folder. Am i not supposed to get the new pic which i have taken? Please elaborate more on this and provide me a solution..I would be grateful to you..
There could be browser caching at play. One way to get around it is to add a random querystring param to the image url (a timestamp etc) to make the image url unique.
<img src="someImage.png?someParam=1234" />
You cannot delete browsers cache programmatically however below code will help you for disabling caching and clears existing cache from your application... Caching is your problem as you explained in question.
public static void DisablePageCaching()
{
//Used for disabling page caching
HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
HttpContext.Current.Response.Cache.SetValidUntilExpires(false);
HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
HttpContext.Current.Response.Cache.SetNoStore();
}
I'm using CefSharp for showing a html file in CefSharp browser.
when I use web_view.Load(#"C:\htmlfile.htm"); it's show my body background.
but when i load htmlfile.htm and use web_view.LoadHtml(File.ReadAllText(#"C:\in.htm")); body background doesn't show?
I want to ask how do i must set address body background in html local file?
This is My Html File content:
<html>
<body background="C:\Untitled.png">
</body>
</html>
Try this:
web_view.LoadHtml(File.ReadAllText(#"C:\in.htm"), #"C:\in.htm");
The second parameters indicates the URL, if the URL is a local resource then, the page will be able to load local resources.
You will have to implement IRequestHandler.OnBeforeResourceLoad(), intercept each request, and read the bytes yourself from disk and suppy them to chromium as a response.
https://github.com/chillitom/CefSharp/blob/master/CefSharp/IRequestHandler.h#L26
Another way you could do this is use a schemeHandler (it's cleaner IMO).
Register a scheme with CEF -
CEF.RegisterScheme("ascheme", new HandlerFactory());
Add a scheme handler that loads the PNG from disk and returns a relevant response
then change your html to refer to the scheme:
body background="myscheme://Untitled.png"
I can fill in the blanks if need be... but that should be enough!
I've been reading through a few asp.net articles, and attempting some code, but I think I may be confused. Can you or can you not draw lines on the screen with code on a ASP.NET webform using c#?
If so, can anyone direct me to some examples?
You cannot directly draw on a webform. You may draw on the image and then embed it on your webform (like any other image).
You can make a canvas and then you can draw whatever you want to draw on it.But direct drawing is impossible.
If you are fine with HTML5 you can try lineto Javascript method:
<script>
context.lineTo(100, 200);
</script>
Please refer # following link for more details:
http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/
Not sure what you mean by "draw a line" but if you are using a web browser you need some kind of HTML object to display this "line". If all you need is a horizontal line you can just add a HR html tag and use CSS toy stylize it. You can also include this line in an image or HTML5 Canvas.
Because there is not screen for your server side code. Your code generates HTML, JavaScript etc. and then browser uses that content to render it on the client screen. So your options are to generate image (draw all that you need) in server side code and send it to the browser, or you can use JavaScript and send browser instructions how to draw lines.
You could probably create a new image using the System.Drawing namespace classes and then do something like dynamically load it into an <img /> tag...but depending on what you're trying to accomplish it may be far easier to either use a JavaScript library of some sort or to use some sort of very simple line image and tweak the length/height using css.
More detail would be needed to understand what you're trying to do. As others have pointed out though, there's no direct way for your C# code to interact with the page. You'd have to have something on the page like an img tag and then set it's source to a C# file like a handler (.ashx). In that handler you could generate the image and then set the response content type as image/jpg and write the raw bytes to the response stream...
Again though, that seems like overkill for something that could be accomplished with CSS or javascript.
I am loading a css file dynamically by making the link style attribute a server tag.
All of the css loads fine except for the image. It just shows the alternate text. I am doing this in the page_load event.
Here is a snippet of my img markup:
<img class="logourl" alt="Header" />
Here is a the css for logourl:
.logourl
{
background-image:url(../images/a-logo.png);
width:169px;
height:61px;
margin-top:5px;
}
When I right-click on the image and view properties, it is blank (size, address, etc).
<img class="logourl" alt="Header" />
Can an <img> tag have a background-image property???? That doesn't even make sense.
According to MSDN, the img object doesn't have this property, so I'd say it's safe to assume it's not supported in IE.
Are you sure you don't want a span, a hyperlink, or some other property where a background-image would make sense?
edit
I just read #Justin Grant's answer. I guess that you can use a background image on an image tag, but I'm keeping my answer because it seems a silly way to do it. if what you want is a frame around your image, I would create a div or span with a set width and height, and an img slightly smaller inside it.
I wouldn't call that loading the CSS file dynamically. You are setting the attribute in the link tag dynamically, but the CSS file is loaded the same way as any other CSS file. The browser doesn't see any difference from any other link tag, so the dynamically set url is not part of the problem.
Where are the image and the css files located? Remember that the url is relative to where the CSS file is, not where the page is.
Note that even if you mangage to set the background image for the image, it will still show the alt text on top of the image and indicate that the image is not loaded. The background-image attribute does not set the source of the image. You should just use a div element instead of the image element.
To put a background-image on an IMG tag, according to http://www.contentwithstyle.co.uk/content/css-background-image-on-html-image-element you'll need to apply a CSS padding and make sure you're using display:block.
Also, if this is a directory-path issue, the image must be relative to the location of the CSS file it's referenced from. Try using an absolute path to verify that this is indeed the problem, then experiment with various relative paths to see if that it gets solved.
If it's still unsolved at that point, I'd suggest trying Fiddler (www.fiddlertool.com) which will let you see HTTP requests being made-- specifically the actual URL being requested by your browser. Make sure to clear your cache first before reloading the page under Fiddler, so you'll be sure to actually make the request and not pull from cache. Anyway, there will be three possible cases:
Fiddler does not show you requesting a URL at all. This points to some issue with your CSS (e.g. not being loaded properly, or a syntax error)
Fiddler shows the image URL being requested, but it shows a 404 (not found) or other error. this means the wrong URL is being requested, or there's a problem with your web site's serving of images from that folder
Fiddler shows the correct URL, and it's getting a 200 status (success) from the server. If this happens, I'm stumped!
Right-click will only show you SRC of an IMG tag. when using a background CSS, you'll need view source.