today i found something weird behavior of asp.net default website template.
I tried to add logo to the master page(i.e., Site.Master)
<div class="title">
<h1>
<img id="logoImage" src="images/headerlogo.png" /><span id="headerUser">heidi jones</span>
</h1>
</div>
Its working for default.aspx age and about.aspx page, but when i go to login page the logo image is not showing there.
Did i miss something? this is the first time im using asp.net default template...
Fallowing are screens
Default.aspx Page
Login.aspx page
Working Code
<img id="logoImage" runat="server" src="~/images/headerlogo.png" /><span id="headerUser">heidi jones</span>
I miss runat tag
The image is being loaded from a relative url - so your root folder pages work, but not in sub folders use ~ at the start of the url in any image controls (don't forget runat='server')
The tilde (~) character represents the root directory of the application in ASP.NET.
This is a relative path:
<img id="logoImage" src="images/smallprof.png">
It means that the browser will look for the image RELATIVE to the url of the current page - i.e. in the root folder it will look for /images/ in the security folder it will look for /security/windows
This is an absolute path
<img id="logoImage" src="/images/smallprof.png">
The browser will always look for /images/ regardless of the url of the page
Use the absolute path
Related
I have a _layout.cshtml which contains everything but the page-specific body of the website. Within this layout I have a header that looks like this:
<div id="header">
<img src="Content/Images/header.jpg" />
</div>
The navigation menu consists of a few ActionLinks that redirect me to the corresponding view.
My problem is that whenever I navigate to a page that is NOT the homepage, the header disappears. I can't see why this would happen, because every _layout is the same, right?
Thank in advance.
Use <img src="#Url.Content("~/Content/Images/header.jpg")" />
Well it looks like I used some wrong pathing. The following change in code fixed the problem:
<div id="header">
<img src="../Content/Images/header.jpg" />
</div>
The child views need an indication that they need to search in the parent folder.
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. In your case use <img src="~/Content/Images/header.jpg" />
I know this is probably a stupid question but I can't find anything on here about it. I have a master page in the root of my solution explorer and just put an .aspx page in a new folder. The master page is referencing an image in another folder and when I preview the page, it's a broken image. What do I have to do to have the page load the image from a master page? Thanks
You must use relative path. Below is an example:
<asp:Image ImageUrl="~/Images/orderedList1.png" runat="server" />
<img src="~/Images/orderedList0.png" runat="server" />
Don't forget to add runat="server" if you don't use asp.net control
Well, by not posting the markup with the reference to the image, you leave us to guess what's happening.
But how about this: you only have a partial (relative) path to the image, and that path is not valid from the location of your aspx file.
Did I guess right?
You may be referencing the image with no path.
When a child page is loaded in a MasterPage, the "current" directory changes to the child page's directory. So the relative path has changed.
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" />
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">?
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");