How to show Image with http url in asp.net - asp.net

In sql server database, I have column name Image which has urls like http://www.xyz.com/1009/image1.jpg
Now I want to display it on my datalist. But it is not showing any image. It is might be the case because it is expecting the Image URL to be ~/Folder/abc.jpg
Then how to show the image on the asp.net page when I have image URL, which control I need to use and how?

Do you see little red X instead of an image?
If so, right click it --> Properties (IE) to see the URL it's referring to.
Might give us hint on what's going on. :)

If you are getting the image from the database in for the form xzy.com/1009/image1.jpg but want to add the http:// then your code should be
<asp:Image ID="imgmain" runat="server" ImageUrl='<%#String.Format("http://{0}", Eval("Image"))%>' Width="80" Height="80" />

Related

how to retrieve image from server side by using attribute add

how to at retrive a image at server side and display on client side? any thing wrong? my picture is store at project. anyone have any idea to help me thx. i'm try alot solution but it still cant work
<asp:Image ID="rating" runat="server" />
rating.Attributes.Add("style", "background-image:url('Image/Icon/Rank/rating1.gif')");
You can use src attribute of image tag.
rating.Attributes.Add("src", "Image/Icon/Rank/rating1.gif");

Open image on next aspx page

I show image thumbnails on page, Now I want when i click on image thumbnail the big images related to that thumbnail open in IamgeDispData.aspx page where i created a data entry form in that page to enter data related to that picture. How can I do this? With help of query string or else??
Query String is a good option.
What you can do put your image inside a asp:hyperlink
Set the URL of asp:hyper link with querysting
And in your detail page get it from url
Note that you can only pass the filepath in the url
And you will have to show it from the physical location
With help of query string ??
Yes, you can use it. Just surround your image with <a> anchor tag or use asp:hyperlink server side tag.
It can be something like
Content/Thumbnails/page.aspx?imageName="your image name"
e.g.
<a href="http://www.espn.com" target="_blank">
<img src="ahman.gif" />
</a>
Ref:
html - image links
Hyperlink image
How to control the image size of a Hyperlink?
example code snippet:
<asp:HyperLink runat="server" ID="hlThumbnail" NavigateUrl='<%# Eval("Url") %>'
Target="_blank" Style="height: 66px;">
<asp:Image runat="server" ID="imgThumbnail" Height="66px"
ImageUrl='<%# Eval("Thumbnail") %>' />
</asp:HyperLink>
In case you have no issue in showing Id to user , it will be the best solution. In case you have some issue in showing Id , you can encrypt it and then use it as Id. You can also validate then user again in the ImageDispData.aspx if he has the permission to enter the data or not for the image.
I am giving way to use using querystring and javascript.
You can use window.open function of JavaScript to open in new window or tab. When you are generating the thumbnail image , create them with url like : yourBigimage.aspx?photoId=10 , open this url using jquery onclick event of image and use window.open

Embed Image to aspx page from code behind

I'm programmatically (server-side) creating an Image object after my user chooses some value from a combonox.
I want to embed this image back into the aspx page at runtime, without saving it to disk or database.
So how can I do this? I tried to use memory stream, and send the image with response object, but than I only saw the image - it had overwritten the entire page.
Thanks...
Create the Handler and request it via:
<img src="Image.ashx?ID=myImageId" alt="text here"/>
<asp:Image runat="server" ImageUrl="~/Image.ashx?ID=myImageId" />
You could base64 encode the data and write it to the image data.
Like this:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
For this you will have to render the img tag yourself.
This way you don't have to write your image to a file on the server. It is sent from memory directly to the client browser.
Refer: Data URI schemes
Note this does not work with IE6.
Do something like this
<img src="yourimagegeneratingpage.aspx?query=value" />
When this image will be loaded it will generate a request to your page (yourimagegeneratingpage.aspx) and that page would respond with the image which will be shown by this img control.

How to map DataNavigateUrlFormatString of Gridview Hyperlink Field dynamicatlly vb.net?

Hope you are having a nice day.
I am developing a gridview for a list of songs with a hyperlink field like below. I left unnecessary codes by the way. The purpose of hyperlink field is for user to download songs. I am using visual studio 2010 and I am still using development server such as http://Localhost:xxxx/mypage.aspx. So I have to update the hyperlink field everytime I run this page in order to keep the link correct. I understand once i put on the live server, i just need to put the domain and this problem is fixed but I am wondering if there is a way to dynamically map the path of DataNavigateUrlFormatString to the development server URL so that I don't need to keep changing while I am on development server.
Thanks a lot.
<asp:GridView>
<Columns>
<asp:BoundField DataField="Song_Name" HeaderText="Song_Name" SortExpression="Song_Name" />
<asp:HyperLinkField DataNavigateUrlFields="Song_Location"
DataNavigateUrlFormatString="http://localhost:6686/RioMusic/Uploads/{0}"
DataTextField="Song_Name" HeaderText="Download" />
</Columns>
</asp:GridView>
Can you just use a relative link? I.e.:
Uploads/{0}
(This will be relative to the page displaying the link.)
Or, if you wish to specify a url relative from the root of your site:
~/RioMusic/Uploads/{0}

Making an image responsive

i build a header in photoshop and imported it to visual basic 2010. I want the header to be a bit more dynamic, so when i press on part of the image (that says contacts for example), it will transfer me to another page.
i know that there is a function in css that does this, it is called mapping. Dreamweaver has an easy way of doing it. But is it possible to map an area on the image, which would make the image respond (as if he clicked a button)?
ASP.net provides 3 ways to give imagemap, these are called 'Hotspot' properties of imagemap control. Circular and rectangular hotspots are easy to understand. here is an example..
<asp:ImageMap ID="ImageMap1" runat="server">
<asp:CircleHotSpot NavigateUrl="nextPage.aspx" />
<asp:RectangleHotSpot Bottom="50" Left="50" NavigateUrl="contactpage.aspx"
Right="10" Top="10" />
</asp:ImageMap>
Sample image illustrated here
ASP setting screenshot
Area mapping links leads to horrible and unnecessary markup. Just put an anchor link around your entire header image like so:
<a href="~/default.aspx" title="Home" runat="server">
<img src="~/images/header.jpg" alt=Home" style="border:none;"
runat="server" />
</a>
If you want to go with Image Maps (not a good design), check these links:
http://www.w3schools.com/TAGS/tag_map.asp
http://www.image-maps.com/

Resources