How to show image in an aspx file? - c#

I'm using this
<asp:Image ID="UserPicture" runat="server" />
to show image in the aspx file and the code behind looks like this:
string imagePath = "~/ProfilePictures/" + UsernameBox.Text;
UserPicture.ImageUrl = imagePath;
But after loading the page, the picture won't show up, only the default picture icon appears. Any suggestions how to do it properly? (Maybe resize the image?)
Thanks

User Server.MapPath() method:
string imagePath = "ProfilePictures/" + UsernameBox.Text;
Make sure UsernameBox.Text must be the xyz.jpg OR any of the file name with extension.

Related

How to open a Pdf file in IFrame?

How Can (in a list with candidates) select one pdf/docx file and open it in a Iframe?
Here is an Image of how the list of candidates looks like:
Dont know exactly where do you want to show that iframe, but this code will help you:
Insert a Literal into your aspx:
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
And this is your C#
string pathFinal = "pdf/yourPDF.pdf"
string embed = "<object data=\"{0}\" type=\"application/pdf\" width=\"100%\" height=\"800px\">";
embed += "If you are unable to view file, you can download from here</object>";
Literal1.Text = string.Format(embed, ResolveUrl(pathFinal));

Image is not showing in image control asp.net

Here is my image control in UI:
<asp:Image ID="Image1" ImageUrl='<%# Bind("strCLogo") %>' runat="server" width="200" Height="200"/>
And here is the C# code, I am grabbing the link of the image from database (customerstbl) but unable to bind it with image control, I can see the image link in the source but its not showing :
protected void Page_Load(object sender, EventArgs e)
{
int nCID = Convert.ToInt32( Session["nCID"].ToString());
DataClasses1DataContext _dc = new DataClasses1DataContext();
CustomersTbl _customer = new CustomersTbl();
_customer = _dc.CustomersTbls.Where(a => a.nCID == nCID).FirstOrDefault();
Image1.ImageUrl = _customer.strCLogo.ToString();
}
here is how I am saving the link of the image in database, It seems I have an issue when I save the image link in database (it saves the whole path not the local directory path and image name)
string s = Server.MapPath("~/Imageslogo/") + Path.GetFileName(LogoUpload.PostedFile.FileName);
LogoUpload.SaveAs(s);
Save the image path as a relative path, configure root path globally
You are storing the path to the image as an absolute path. This is bad for several reasons, the main ones being:
What happens if you deploy your app to a different server with a different file structure? your absolute path will be wrong
What happens if you decide to move all of your images (but keep the structure of the image folder)? Again, your absolute path will be wrong.
I would advise you to store the relative image path in the database. In this case /Imageslogo/100001203240.jpeg. Then store the image root path (the part before the relative path) in your Web.config file. E.g. in the appSettings:
<appSettings>
<add key="myApp.Imageroot" value="F:\projects\accounting\Accounting2014\Accounting2014" />
</appSettings>
You can get this appSetting value using the following code:
string myRoot = System.Configuration.ConfigurationManager.AppSettings.Get("myApp.Imageroot");
With these two parts of the full path, you can:
Use the relative path in your HTML output which will work fine on your web server
Construct the full path by combining the root from your appSettings with the relative path in the database. You might use this is you need to manipulate the image programmatically or otherwise access the actual file instead of just passing the path to the client browser.
Easily change the root by changing the appSetting
note
As an aside, if you are setting the ImageUrl property in code behind, then the ImageUrl attribute in your .aspx becomes pointless. So remove it:
<asp:Image ID="Image1" runat="server" width="200" Height="200"/>
F:\projects\accounting\Accounting2014\Accounting2014\Imageslogo\10000120324‌​0.jpeg is not the correct value for Image.ImageUrl Property, the correct value is the relative path like ~/Imageslogo/10000120324‌​0.jpeg.
You need to save the relative path to the database, use the code below to get the relative path
string imageLocation = string.Format("~/Imageslogo/{0}", Path.GetFileName(LogoUpload.PostedFile.FileName));
and save imageLocation to strCLogo column of CustomersTbl table.

ImageButton image not displaying

I am trying to programmatically set image of ImageButton.
My code is below:
String path="Images/1/";
path= path + string.Format("{0}", _ds.Tables[_bplp.SqlEntityX].DefaultView[0]["Photograph"]);
ImageButton1.ImageUrl = path;
I am saving images in my site folder Images/1 , and storing image name in database.
Problem lies when I am trying to display image in ImageButton.
Although after debugging it, path variable is taking correct path of image
as "Images/1/imagename.jpg", but still ImageButton doesnot show image.
Also, Images folder lies at root level of website.
try this
replace this
String path="Images/1/";
with
String path="~/Images/1/";
Also, you can try ResolveUrl();
ImageButton1.ImageUrl = ResolveUrl("~/" + path);
Problem was in my webconfig file, I had set incorrect site folder url in that, above code is working fine now
Thanks to all

ToolTip with image inside of it

I currently have a hyperlink control as such:
<asp:HyperLink ID="logoLink" runat="server" NavigateUrl="#"></asp:HyperLink>
I am setting the logo text of it as such within my grid:
HyperLink logoLink = (HyperLink)e.Item.FindControl("logoLink");
logoLink.Text = lblsub + ".gif";
What I like to do is that when a user clicks on the hyperlink, I like the gif file to show within a tooltip.
what is the easiest way of doing this? The image is in the Image folder so the path would be as such:
Images/ + lblsub + ".gif";
You can use jQuery/JavaScript to achieve this.
There are different custom tooltips can be found online.
I have came across this Tooltip your images which is pretty cool.
Also have a look qTip

Why when I change the src of an image with jquery, the the src is not changed in my c# codebehind?

I have a gallery of thumbnails. When you click on a thumbnail, the main image changes to the thumbnail clicked by using jQuery and changing the 'src' tag of the . This works as expected.
$('#ContentPlaceHolder1_photoSpotImage').attr('src', src.replace(/-thumbs/, ''));
I have a link that, when clicked, makes the image a downloadable file using the Content-Disposition methods in the header. When hard-set in the code it works as expected.
<asp:LinkButton runat="server" PostBackUrl="" ID="link2TheDownload" Text="+ download it" onclick="link2TheDownload_Click"></asp:LinkButton>
Now, I have added programmatically in the codebehind get the filename of the selected image from the 'src' tag of the tag.
string thisServerName = Request.ServerVariables["SERVER_NAME"].ToString();
string thisHref = "http://" + thisServerName + "/" +photoSpotImage.Src.ToString();
Uri uri = new Uri(thisHref);
string filename = Path.GetFileName(uri.LocalPath);
string thisAttachment = "attachment; filename=" + filename.ToString();
Response.ContentType = "image/jpeg";
Response.AppendHeader("Content-Disposition", thisAttachment.ToString());
Response.TransmitFile(strDirectFilePath.ToString() + "/photos/1/" + filename.ToString());
Response.End();
The C# only has the filename that is initially set Onload and it appears that the jQuery has not changed the src.
I need to get the current filename so I the user can download the proper image file.
Help!
JQuery only manipulates the DOM on the client-side. It won't modify the view state and images aren't included in the POST request. You will have to post back a hidden form field with the correct value.
Yes it's the correct result from your code, it will not update because it's using the rendered html from the server but not the jQuery updated html, this is how it really works, for your adjustment you can just adjust the code in your C# code, like this:
string thisServerName = Request.ServerVariables["SERVER_NAME"].ToString();
photoSpotImage.Src.ToString().Replace("-thumbs", string.Empty);
First, do this on your code-behind:
photoSpotImage.Attributes["data-filename"] = "image.jpg";
Now, this would output something like this on the client-side:
<a id="ContentPlaceHolder1_photoSpotImage" data-filename="image.jpg">Test hyperlink</a>
Because you have the file-name embedded as an attribute of the a-element, you can form the full URL to the file using jQuery:
$('#ContentPlaceHolder1_photoSpotImage').attr('src', $('#ContentPlaceHolder1_photoSpotImage').attr('data-filename')));
You can use "file-path" instead of filename but my above example should give you a general idea.

Categories

Resources