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" />
Related
When I create an HTML server control in ASP.NET 4.5 with an ID and use CSS to style that ID, it fails. When I inspect the source of the ASPX page, it shows that ASP.NET has changed my control's ID. In this instance...
<div id="PasswordStatus" class="well well-sm" runat="server">
Current
</div>
...becomes...
<div id="article_PasswordStatus" class="well well-sm">
Current
</div>
Can I then reliably (and with best practices in mind) just create the CSS style for #article_PasswordStatus instead? Or should I create a one-use CSS class for it, something like...
<div id="PasswordStatus" class="well well-sm password-status">
Current
</div>
Preferably, can I still somehow use the original ID I assigned?
Note: I do not want to convert this to a Web server control.
Assuming .net 4 and greater, you can use ClientIDMode. Your HTML would be like this
<div id="PasswordStatus" class="well well-sm" runat="server" ClientIDMode="Static">
Current
</div>
When using Static the ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.
Add in the ClientIDMode="Static" option to ensure your client Ids do not change.
Information can be found here.
<div id="PasswordStatus" class="well well-sm" runat="server" ClientIDMode="Static">
Current
</div>
This option forces the control’s ClientID to use its ID value directly. No naming container naming at all is applied and you end up with clean client ids
It's usually a best practice to use classes for css styling instead of IDs. You can avoid problems like this, reuse your css and so on, so that would be the path I'd choose.
ID in asp.net (webforms) can be modified in various ways and I wouldn't rely on that personally.
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" />
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
Suppose this scenario. On my Default.aspx, I insert a context (WebForms), called MyContext.ascx, that load an image. So the path would be :
<img src="/images/hello.gif" />
Well. Now, I'd like to insert the same context on another .aspx page, that is in another forlder, such as /myfolder/MyPage.aspx
Than, the path of the image now should be :
<img src="../images/hello.gif" />
How you can see, I can't manage two different path for the same context. So, is there a way (symbol) to call the virtual-path of my application? Without using my own function as
<img src="<%=MyUtilities.GiveVirtualPath%>/images/hello.gif" />
which is boring. Who know?
Put your images in the root of your web-site (and inside a resources/styles/themes folder).
You can use the tilde ~ to indicate the root of your site. All your pages will refer to that. If you're using server side controls you do not even need to use the ResolvePath() method (in your example you should use it, if for example you wrote asp:image ImageUrl="" you do not need to. From MSDN.
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">?