ASP.NET: images interrompues lors de la combinaison d'URL Rewriting, asp: ImageButton et balise de base html

Question

J'utilise l'URL Rewriting sous ASP.NET 4 (en utilisant ISAPI_Rewrite) et je constate que certaines de mes images ne se chargent pas semble que .NET ne pas comprendre que je utilise une balise html de base (assez standard et essentiel lorsque vous faites URL Rewriting):

par exemple dans mon environnement de développement que j'ai:

<base href='http://localhost/venuefinder/Website/'></base> 

et sur mes pages J'ai:

<asp:ImageButton runat="server" ImageUrl="~/images/button.gif" /> 

Sur la page d'accueil du site (http://localhost/venuefinder/Website/) cela fonctionne très bien, mais sur une page qui utilise la réécriture d'URL, l'image ne fonctionne pas:

/venuefinder/Website/venues/ashton_gate_stadium/V18639/ 

..as le navigateur tente de charger:

http://localhost/images/buttons/search-button.gif 

au lieu de:

http://localhost/venuefinder/Website/venues/images/buttons/search-button.gif 

Cela se produit parce que .NET est rendu le bouton comme:

src="../../../images/buttons/search-button.gif" 

... ce qui est incorrect.

Y at-il un moyen de corriger ce problème afin que .NET rende l'attribut src correct pour l'image? (Sans tous les ../../../ etc)

Answer 1

Au lieu d'utiliser ~/ dans les images, créez un dossier virtuel dans IIS appelé images qui mappe à votre répertoire d'images (donc: http://localhost/images =>c:\myproject\somesubdir\content\images). Ensuite, vous pouvez utiliser

<asp:ImageButton runat="server" ImageUrl="/images/button.gif" /> 

Nous faisons cela pour tous les éléments de contenu de notre site Web (script/images/css).

Si vous utilisez <base> en HTML, le navigateur utilise l'URL donnée comme base pour les images commençant par /. Donc, dans votre cas, vous pouvez simplement laisser tomber le tilde.

---

L'un des avantages de l'approche du répertoire virtuel avez cependant est que vous ne jamais se soucier de la structure url de nouveau, ni dans .NET ou JS:

ScriptHelper.RegisterScript("/js/somefile.js") 

ou

$().append('<img src="/images/file.jpg"/>')