ASP.NET: images broken when combining URL Rewriting, asp:ImageButton and html base tag - asp.net

I'm using URL Rewriting under ASP.NET 4 (using ISAPI_Rewrite) and I'm finding that that some of my images are not loading as .NET does not seem to understand I'm using an html BASE tag (pretty standard and essential when doing URL Rewriting):
eg in my development environment I have:
<base href='http://localhost/venuefinder/Website/'></base>
and on my pages I have:
<asp:ImageButton runat="server" ImageUrl="~/images/button.gif" />
On the home page of the site (http://localhost/venuefinder/Website/) this works fine, however on a page that uses URL rewriting, the image does not work:
/venuefinder/Website/venues/ashton_gate_stadium/V18639/
..as the browser is trying to load:
http://localhost/images/buttons/search-button.gif
instead of:
http://localhost/venuefinder/Website/venues/images/buttons/search-button.gif
This is happening because .NET is rendering the button as:
src="../../../images/buttons/search-button.gif"
...which is incorrect.
Is there any way I can correct this problem so that .NET renders the correct src attribute for the image? (without all the ../../../ etc)

Instead of using ~/ in images, create a virtual folder in IIS called images which maps to your images directory (so: http://localhost/images => c:\myproject\somesubdir\content\images). Then you can use
<asp:ImageButton runat="server" ImageUrl="/images/button.gif" />
We do this for all our website content items (script / images / css).
If you use <base> in HTML, the browser takes the given url as base for images that begin with /. So in your case you can just ditch the tilde.
One of the advantages of the Virtual Directory approach however is that you never have to bother about the url structure again, neither in .NET or JS:
ScriptHelper.RegisterScript("/js/somefile.js")
or
$().append('<img src="/images/file.jpg"/>')

Related

CSS and image paths not working

Paths defined within master files are not working on a new server. They worked fine on production server and development machine. Here is an example of the file:
/HeadOffice/Styles/HeadOfficeCalendar.css
Unless I put full URL with the virtual name, the paths don't work.
working:
https://connect.server.co.uk/FesQA/HeadOffice/Styles/HeadOfficeCalendar.css
I can also include resolved URL within ASP>NET code tags but I don't want to change all those paths they are probably hundreds of them. so if the head office folder is in the same folder as master file it should just be able to reference like:
/HeadOffice/Styles/HeadOfficeCalendar.css
It seems the references within the master files and aspx files seems to work fine by adding ~ and runat = server. but images references within the CSS files are not working unless I include the full path.
DOESN'T WORK
url(/HeadOffice/Images/tlcorner.png)
DOES WORK
url(connect.server.co.uk/FesQA/HeadOffice/Images/tlcorner.png)
I know I've answered this before, but this has been known issue forever in VS.
Simple way to do this correctly is to drag the CSS file from Solution Explorer window to head section of master page in code view.
For other links on your site, make sure to include the runat="server" attribute and resolve your links like this (with "~" operator):
<img src="~/images/sample.jpg" runat="server" />

URL Rewriting to add / before every path in ASP.Net

I am using Routing in ASP.Net 4.0.
Use of Routing and the side effects
I did routing of two pages, one page has url profile.aspx?id=yJkl, i converted it into /profile/yJkl. But my paths of CSS, Images and JS got disturbed. I took help from a lot of sites and links and found ignore method, but it did not work.
I want to use URL Rewriting
Whenever i add / before any image source or javascript path, it starts working because it takes path from root, i know this. What i want is URL Rewrite, i want that all links of js, aspx, css, images, which were used in my aspx html pages should have a / as prefix in their path. Forexample if i have <img src='images/blabla.png' />, asp.net should auto convert it into <img src='/images/blabla.png'>.
Please tell me what to add in web.config or tell me if you have any solid solution of routing to ignore. I am newbie in routing/rewriting so forgive me if i asked anything stupid.
Use ResolveUrl or ResolveClientUrl
ResolveClientUrl("~/Images/Test.jpg"); //yields "../Images/Test.jpg"
Page.ResolveUrl("~/Images/Test.jpg"); //yields "/Images/Test.jpg"

Umbraco not allowing httphandler resized image to be input

I am attempting to move legacy content into Umbraco v4.9.1. Some of the photos that are being migrated are being resized using an httphandler (ImageResizer.ashx) using variables passed through the query. When I attempt to save the path the url is replaced with either "/" or what the path originally was. Is there a work around? The tag is below.
<img src="/imageresizer.ashx?mw=232&src=/imagePath/image.jpg" />
The url is correct, because if I type it into a browser the image comes up fine. It seems like Umbraco is filtering out this url.
UPDATE:
I am noticing that the editor is chopping off everything before /imagePath/image.jpg and only displaying that. I have tried turning off the TidyEditorContent in the UmbracoSettings.config and it still does this.
A workaround would be to UrlEncode the src part of these Urls, where "/" is replaced by "%2F".
<img src="/imageresizer.ashx?mw=232&src=%2FimagePath%2Fimage.jpg" />
I don't know if you can do this is your particular situation, but it is a workaround.

Why does my localhost image url change

I have a bunch of images in my localhost folder (C:\inetpub\wwwroot\Images) which I am trying to access within my ASP.net application. The image src generated in my markup is:
<img id="MainContent_MainImage" src="localhost/Images/FGOStuart_7166.jpg" />`
This fails to load the image and if I look at the source for the page it actually directs to
http://localhost:64395/Pages/localhost/Images/FGOStuart_7166.jpg
so it looks like it is trying to access a path relative to the page (on the Pages folder). The src works if I type it into the browser manually and the image is displayed.
Can anyone explain what's going on here and how to fix it? I'm attempting to move the images out of the database and onto the file system but without much luck so far.
That's because the browser assumes "localhost" is a folder and adds it to the current relative path. Add http to it and it should work fine, or remove localhost altogether and just leave the /Images... part.
Try it like this:
<img id="MainContent_MainImage" src="~/Images/FGOStuart_7166.jpg"
alt="An Image" runat="server" />
This resolves it server-side from the root down. And always use an alt :)
What you really want to be doing is using the magic tilde:
<img id="MainContent_MainImage" runat="server" src="~/Images/FGOStuart_7166.jpg" />
~ signifies the root of the application. Notice I added runat="server", too.

Where do I put my CSS, how do I link to it from the master page?

I have installed SharePoint 2010 on a single machine in farm mode pointing to a db on another server. I would like to start dabbling into branding the site by doing something that I initially thought to be trivially straightforward, link to a custom CSS from a SharePoint 2010 master page.
I have uploaded a custom css (Let's call it custom.css) using SharePoint designer in the Site Assets. What syntax do I need to put to link to it? I have tried the following:
<SharePoint:CssRegistration name="custom.css" After="corev4.css" runat="server"/>
But the server cannot find the CSS file. I receive the following error:
Cannot make a cache safe URL for "1033/styles/custom.css", file not found. Please verify that the file exists under the layouts directory.
I've assumed I need to use SharePoint:CssRegistration - Is my assumption correct?
So what is it exactly that I need to put in the name tag to link to a css uploaded via SharePoint designer?
Am I even on the right track or would you suggest an alternative way of putting this together?
I would use Alternate CSS first. But other options are:
If you put the CSS file in Style Library, you can do this:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom.css%>" runat="server"/>
Put the CSS on the server as 14\TEMPLATE\LAYOUTS\1033\STYLES\custom\custom.css and then you can do this:
<SharePoint:CssRegistration name="custom/custom.css" runat="server"/>
Putting the file into its own directory is considered best practice so that it does not interfere with updates to out of the box files.

Resources