img tag doesnt print thumbnailed photo - c#

im doing a project using .net MVC web Application.
i recently used a code to create a new thumbnail to photos (re defining the sizes of a photo) . and now i'm trying to print the photos using the 'img' tag of HTML but without success.
the thumbnail creating code :
Image thumbnail = Image.FromFile(destPath);
thumbnail = (Image)(new Bitmap(thumbnail, new Size(this.m_thumbnailSize, this.m_thumbnailSize)));
thumbnail.Save(destPathThumb);
now for the img printing :
#Html.DisplayFor(modelitem=>item)
<img class="img-rounded" style="border-radius:50%" src=#item alt="">
item is the path to the picture and it is currect (ive checked serveral times).
any ideas what i could be ?
thank you for helping me ! :)
EDIT: the img tag prints normal pictures -> pictures that my program did not create(as i said,my program created thumbnail pictures)

I wonder if it is not releasing the file lock on the image, I have had that problem in the past. You have to be very careful about releasing those Image and Bitmap objects.
Something like this might work, as it will dispose the image before the page starts using it:
using(Image thumbnailoriginal = Image.FromFile(destPath)){
using(Image thumbnail = (Image)(new Bitmap(thumbnailoriginal, new Size(this.m_thumbnailSize, this.m_thumbnailSize)))){
thumbnail.Save(destPathThumb);
}
}
It seems like a lot of brackets on the end but thats ok.
If it still does not work, can you post the html that is sent to the browser, you can do that using "View page source" from the right-click menu in Chrome.

Now we have the html that is going to the browser, we can see that the src attribute is pulling directly from the C drive, rather than from a web url:
<img class="img-rounded" style="border-radius:50%" alt="" src="C:\Users\Operu\Desktop\dest\Thumbnails\2018\6\Sasuke.png">
Normally we would want to see something more like this:
<img class="img-rounded" style="border-radius:50%" alt="" src="\Thumbnails\Sasuke.png">
Could you post the model and controller files next please, so we can see what type of object the #item is when it hits your view. Then we can hopefully get it to pull the relative url address instead of the file location.

Related

Adding Image with url to clipboard

I'm trying to figure out how to get an image added to the clipboard with an associated URI.
Adding a link to text is easy:
string html = #"Version:0.9
StartHTML:<<<<<<<1
EndHTML:<<<<<<<2
StartFragment:<<<<<<<3
EndFragment:<<<<<<<4
SourceURL: <<<<<<<5
<html>
<body>
<!--StartFragment-->
<a href='aria: 73571 73570'>test 73571 73570</a>
<!--EndFragment-->
</body>
</html>";
string link = html;
Clipboard.SetText(link, TextDataFormat.Html);
but its not obvious what to do with a picture such as a bitmap.
Has anyone done this?
--- additional info ---
Just to clarify - the image I need to use is a bitmap generated by the program. I need to associate the image with a URI so that when pasted into something like Word, the user can click on the image to go to the link. Adding the bitmap to the clipboard on its own I can do, but its the URI part with it that I'm not sure of.
---- Another edit -----
I've tried going the embedded encoded image route by creating a string with the following in it:
Version:0.9
StartHTML:000089
EndHTML:9575818
StartFragment:000242
EndFragment:9575780
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML clipboard</title>
</head>
<body>
<!--StartFragment--><a href='aria: 73571 73570'><img src='data:image/png;base64,### Encoded Image removed for brevity ##'>
<!--EndFragment-->
</body>
</html>
if saved as an HTML file, this opens in a browser perfectly and the image lets me click on the link with no problem.
When I tried to use the clipboard:
DataObject obj = new DataObject();
obj.SetData(DataFormats.Html, new MemoryStream(encoding.GetBytes(htmlResult)));
Clipboard.SetDataObject(obj, true);
htmlresult is the string containing the html fragment as shown before. When I try to paste into word, I can't get anything out of it.
I'm now running out of ideas..
You can put multiple items on the clipboard simultaneously. Currently, you're only putting the html content on the clipboard, but not an actual image, and thus, applications pasting it will most likely not see it as image. You'll need to put both into the DataObject before putting it on the clipboard.
One thing I can see is an issue is the fact that the html fragment does not contain a url at all. It contains a raw data block as Base64. If you want it to point to a url, then you should give it a real url, rather than the data:image/png;base64, block. The html block you put on the clipboard is supposed to be additional metadata to go alongside an image, not the image itself.
Also, what is that aria: 73571 73570? That's not a url either.
Anyway, the proper way to put things onto the clipboard from stream is the following:
using (MemoryStream htmlStream = new MemoryStream(encoding.GetBytes(htmlResult)))
{
DataObject obj = new DataObject();
// The html content.
obj.SetData(DataFormats.Html, htmlStream);
// As standard bitmap
obj.SetData(DataFormats.Bitmap, image);
// The 'copy=true' argument means any streams that are used
// can be safely disposed after the operation.
Clipboard.SetDataObject(obj, true);
}
The mentioned image is the image. I'm not sure if this works the same way in wpf though; I've been doing this kind of stuff with the System.Drawing classes.
Do note that this kind of clipboard handling has no transparency support. Technically, the clipboard has no image transparency support, but certain programs can read other formats (like png) from the clipboard to get around that. See this answer for more information on that, though do note that that answer is not written for wpf.

How to play Microsoft Azure Videos (using azure media player) in lightgallery?

I am using slider pro for showing product image slides and using azure media player's video tag to show videos on sp-slides-container div. The video is playing fine on sp slider but when I click on it and the lightgallery opens it's neither able to play the video nor show the thumbnail due to different HTML structure than slider pro. The following examples are from the console:
**lightgallery-all.min.js:4 lightGallery :- data-src is not pvovided on slide item 1. Please make sure the selector property is properly configured. More info - http://sachinchoolur.github.io/lightGallery/demos/html-markup.html**
<div data-vimeo-id class="lg-thumb-item active">
<img src(unknown)>
</div>
And on the preview div:
<div class="lg-img-wrap">
<img class="lg-object lg-image" src="undefined">
</div>
Here the img src is undefined because I am using video tag, not img tag in my dynamic html code. It's using data-vimeo-id and img tag but I need to append the tag there dynamically (which I added in C# controller code with dynamic source and poster url) instead of the default img tag.
How can I define the video tag inside lightgallery dynamically? Is there any better way to do this? Please note that I have no other option except azure media player for showing the videos on the webpage. The images are working fine in the lightgallery because img tags are defined properly but this issue is only happening with video tags.

Gmail doesn't show picture which return from Controller ASP.NET MVC

Currently, I am doing an task that sends email to user which will contain a picture. The picture is returned from 1 controller.
However, when sending an email, the gmail throws a 404 error even I can see the picture by going to url : Controler/ActionMethod ....
In another hand if sending an email with the src in <img> tag hard code which points directly to the picture location in the server, without calling to the controller it works.
For example:
<img src= "mydomain.com/images/pic.jpg"> => this works
<img src= "mydomain.com/ImageController/GetImage"> => this goes to controller then gets image which doesn't work.
becuse GetImage views folder have no images you need to use relative path.
img src= "~/images/pic.jpg" hope it works.

Fancybox single image loading fails on IE

Using Fancybox single image box, the image is not completely loaded in IE. Chrome loads the image perfectly, but on IE it looks like as the loading is cut short somehow. The image itself comes from DB as byte array and loads just fine on IE when set as an ordinary html image.
This is what I get on Fancybox:
Any pointers on how to force the loading to continue until the whole image is sent?
Edit
JQuery for fancybox:
$("a#single_image").fancybox({
'type': 'image',
'hideOnContentClick' : 'true'
});
Image:
<a id="single_image" href="<%= Source %>"><img runat="server" id="largeImg" /></a>
Where "Source" is a string containing the image data.
Fixed it myself after scratching my head for a really long time.
Turns out the request grows too long for IE to handle (or something like it) when the image data is read twice from the code-behind.
Instead I removed the href attribute from the <a>-tag and added it again with jQuery, so that it's read from the <img>-tag's src attribute, like so:
$(document).ready(function () {
var src = $("#<%: largeImg.ClientID %>").attr("src");
$("#largeImgLink").attr("href", src);
});
This also keeps the request shorter and reduces traffic load on the server.
On a footnote, this was not a Fancybox-specific issue. The problem was the same with Lightbox also, and only on IE and EDGE. Chrome loaded the image correctly from the beginning.

Html Image control not displaying image

Below is my html image control:
<img alt="" src="C:\Users\hkalidindi\Desktop\Feedback.jpg" style="height: 19px; width: 20px"/>
But after debugging it is not showing me any image:
I am new to dotnet..please help me to solve this issue...I know how to display image in image control but i am bit confused about the html image control...
Use image only from the content of your website. So copy the image in your website folder say Images and access your image as <img alt="" src="..\images\Feedback.jpg" style="height: 19px; width: 20px"/>. Or you could use Asp.NET Image control and set image path in Server code using
myImage.ImageUrl=Server.MapPath("Images\Feedback.jpg");
"C:\Users\hkalidindi\Desktop\"
Is only local, try uploading it to a website such as http://imageshack.us, http://tinypic.com, grab the direct link and put that in the source.
<img src="URL">
Here URL = The url of the image.
Possible values (for src):
An absolute URL - points to another web site (like src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like src="image.gif")
Refer: HTML src Attribute
You are trying to call the image in your local folder. Add the image to the 'Images' folder in your solution and link to that.
Make sure the image is being referenced from a folder that is in your websites application/dir. Then you can reference it simply by using a tag like so:
<asp:Image id="imgFeedback" runat="server" ImageUrl="~/_common/img/feedback.jpg" />
Or set the image path on the server side:
this.imgFeedback.ImageUrl = Server.MapPath("\_common\img\feedback.jpg\");

Categories