What is the correct way to reference an image in ASP.NET for live deployment on IIS?
The following works in dev and production:
<asp:ImageButton ID="ibnEdit" runat="server" OnClick="ibnEdit_Click" ImageUrl="~/App_Themes/Default/images/one.png" Visible="false" ToolTip="Edit" />
The following doesn't work in either: (why not?)
<img src="~/App_Themes/Default/images/two.gif" />
The following works in dev but not in production:
<img src="../App_Themes/Default/images/two.gif" />
If you want to use a regular img tag with the ~ path, you can just add runat="server" into the tag as an attribute (like regular server controls) and the path will be resolved. e.g:
<img src="~/App_Themes/Default/images/two.gif" runat="server" />
For your second part, is the ../ image reference appearing on more than one page, for example a user control or master page (etc) such that you might be using it at different folder levels...
I use this syntax for access images from master pages
<img src="<%=ResolveUrl("~/Content/Images/error_img.jp")%>" width="350" style="padding-right: 15px; padding-top: 20px;"/>
The ~ will only work on a server control such as <asp:Image> or <asp:ImageButton>. This tells ASP.Net to insert the application path. Sometime that's just "/" but if your application is not the root directory of the website it will include the path it is in. The img tag is just html and it will not be altered by ASP.Net, so the browser gets the path "~/App_Themes/Default/images/two.gif" and doesn't know how to read it.
I don't know why the last example works in dev but not in production. It might has something to do with having the application in the root directory in dev but in a sub directory in production.
This worked for me
$(".selector").attr('src', "Content/themes/base/images/img.png");
The important is that you do not have "/" at the beginning of your new src.
byte[] imageArray = System.IO.File.ReadAllBytes(Server.MapPath("~/Images/Upload_Image.png"));
string base64ImageRepresentation = Convert.ToBase64String(imageArray);
You can look into my answer . I have resolved the issue using C# language.
Why can't I do <img src="C:/localfile.jpg">?
Related
ill try my best to explain this..
in the site.master I have added a logo to the title like so.
<div class="title">
<img alt="" class="style1" src="Images/logo.png" />
</div>
the logo shows up fine in all pages accept when the url is part of the account.
for example..
"http://localhost:54341/Sitename/mypage.aspx" (shows fine)
however
"http://localhost:54341/Sitename/Account/Register.aspx" (doesnt show)
im guessing its because it is in a parent folder (the images file).
Is there a better way?
EDIT: Images folder is at the top level
thanks in advance
Try using relative path with respect to root of the application:
<img alt="" class="style1" runat="server" src="~/Images/logo.png" />
Explaination:
ASP.NET includes the Web application root operator (~), which you can use when specifying a path in server controls. ASP.NET resolves the ~ operator to the root of the current application. You can use the ~ operator in conjunction with folders to specify a path that is based on the current root.
The following example shows the ~ operator used to specify a root-relative path for an image when using the Image server control In this example, the image file is read from the Images folder that is located directly under the root of the Web application, regardless of where in the Web site the page is located.
<asp:image runat="server" id="Image1"
ImageUrl="~/Images/SampleImage.jpg" />
You can use the ~ operator in any path-related property in server controls. The ~ operator is recognized only for server controls and in server code. You cannot use the ~ operator for client elements.
This should do it...
<img alt="" class="style1" src="<%=ResolveClientUrl("~/Images/logo.png")%>" />
#Kevin Main suggested : You need to put runat="server" on the image for this to work.. this worked a treat
This will work for localhost:54341/Sitename/Account/Register.aspx
<img alt="" class="style1" src="../Images/logo.png" />
I have my app written with all the links relative to the root path. Now, when I upload it to the server, the server has two additional levels like /apps/thisapp/ so all my links(those not run on server) get broken..is there a fast way to fix it?
If you want all your links to resolve to the root, you could do it server-side with:
<img src="~/apps/thisapp/images/logo.gif" alt="" runat="server" />
The combination of the root tilde operator ("~/") and the runat attribute will ensure server-side resolution of the link.
There's probably not a good fast way to fix it without going through each relative URL. Generally, you'll want to use Url.Content.
<img src="<%= Url.Content("~/images/logo.gif") %>"/>
I'm confused with ASP.NET relative path, please can someone help?
In a Master Page I gave a link label referencing:
Login
From the ASP.NET official documentation I read:
The following example shows the ~ operator used to specify a root-relative path for an image when using the Image server control In this example, the image file is read from the Images folder that is located directly under the root of the Web application, regardless of where in the Web site the page is located.
<asp:image runat="server" id="Image1"
ImageUrl="~/Images/SampleImage.jpg" />
With the Login markup, when I click the link from a page in the /Account folder, I'm redirected to:
/Account/~/Account/Login.aspx
Why? WHY?h
Because you're using it directly in markup, rather than in a server control. Something as simple as this should fix it:
<a runat="server" href="~/Account/Login.aspx">Login</a>
Basically, the ~ path reference needs to be translated on the server, since it's a reference to the server path of the application's base directory. Plain HTML markup isn't processed on the server, it's just delivered as-is to the client. Only server-processed code will translate the ~ path to what it resolves to.
use this command
<a href="<%=Page.ResolveUrl("~/product.aspx")%>" >Link To Products</a>
You can use ~ when refering to URLs inside ASP.NET Server Controls.
You are using it in a <a> tag which is just plain html that doeesn't know anything about ~ . use '"/Images/SampleImage.jpg"' instead
While designing a master page i am adding a number of images to it.
I have an image tag inside the master page,
<img src="../../Content/Images/img19.jpg" class="profileImage" />
When i run my app, the image doesn't show up in the browser because the src path in the page that browser gets is same as in the master page.
ie. "../../Content/Images/img19.jpg"
But it should have been "Content/Images/img19.jpg"
If i correct the src path in master page as
<img src="Content/Images/img19.jpg" class="profileImage" />
Then I can see the image in the browser but not in design mode.
Any help is appreciated.
Use Asp Images
<asp:Image ID="Image1" runat="server" ImageUrl="~/Content/Pictures/xxx.png" />
You will see images in design mode and when you publish Pages too.
It should work fine if you use a leading slash:
<img src="/Content/Images/img19.jpg" class="profileImage" />
For other situations, you can convert a virtual (relative) path to an application absolute path using Url.Convert, such as
Url.Content("~/Content/Images/img19.jpg");
I have this code -
<td id="td_h1" runat="server" style="background-image:url(images/img_new.jpg);vertical-align:top">
<div id="title_1" runat="server" class="caption" >This is New</div>
</td>
Here's the problem -
this is the code from the .master.aspx page. Some file accesses this master page from different folders, and some files from root. And the img_new is visible only from root files or files in folder. How do I make that image visible from everywhere?
You have two options.
You can use an absolute path, like this: url(/BaseDir/images/img_new.jpg)
You can call ResolveClientUrl, which will return the correct path, like this:
url(<%=ResolveClientUrl("images/img_new.jpg")%>)
EDIT: ResolveClientUrl takes a relative URL, so it should not start with ~/. Try again without ~/.