Проблема с изображениями и таблицей стилей при использовании urlrewriter - PullRequest
Новая
       10

Проблема с изображениями и таблицей стилей при использовании urlrewriter

1 голос
/ 06 декабря 2008

Я использую urlrewriter.net, как рекомендовано в нескольких вопросах здесь. У меня проблемы с отображением изображений и таблицей стилей.

Я прочитал блог ScottGu (опять же, как рекомендуется здесь), и в конце он ссылается на эту проблему и заявляет, что использует ~ / для серверных элементов управления и т. Д. («Правильная обработка CSS и ссылок на изображения» в конце статьи ).

Я попробовал его решение, но оно не работает.

Единственное, что мне подходит, это написать полный путь. По некоторым причинам, это не кажется мне правильным решением. Это создаст серьезную проблему при разработке и отладке.

Кто-нибудь знает, что может быть причиной проблемы? Что-то мне нужно изменить в файле web.config?

Спасибо

Ответы [ 8 ]

2 голосов
/ 09 января 2009

Вы пробовали с Page.ResolveUrl? 

<link href="<%=Page.ResolveUrl("~/mycss.css")%>" type="text/css" rel="stylesheet" />
2 голосов
/ 16 декабря 2008

По моему опыту базовый тег является источником гораздо большего количества проблем, чем решает

Я настоятельно рекомендую первый вариант ограничения действия URLrewriter, т. Е. проверка на расширение .aspx перед действием.

0 голосов
/ 24 ноября 2009

У меня также была проблема с таблицами стилей и изображениями.

Я не хотел использовать решение Base Href и исправил проблему с обновлением относительных путей, чтобы начать с одного слеша.

Мои настройки

nopCommerceStore используется для создания интернет-магазина.

nopCommerce использует библиотеку UrlRewritingNet.UrlRewrite для обработки перезаписи URL.

nopCommerce использует темы и скины ASP.NET для определения внешнего вида интернет-магазина.

На стороне сервера у вас есть следующая структура папок:

корень

корень / App_Themes / darkOrange / base.css

корень / App_Themes / darkOrange / корзина кассового-order.css

корень / App_Themes / darkOrange / category.css

root / App_Themes / darkOrange / css / ie6.css (этот файл был в конечном итоге удален)

корень / App_Themes / darkOrange / IMG / transparent_image_example.png

корень / CSS / ie6.css

root / MasterPages / Root.Master

root / Default.aspx root / Category.aspx

При посадке на страницу по умолчанию (браузер запрашивает http; // yourstore / default.aspx) ваш HTML-источник будет содержать следующий HTML-код: 

<link href="App_Themes/darkOrange/base.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/darkOrange/cart-checkout-order.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/darkOrange/category.css" type="text/css" rel="stylesheet" />
...

Браузер выполнит следующие запросы:

HTTP; // yourstore / App_Themes / darkOrange / base.css

HTTP; // yourstore / App_Themes / darkOrange / корзина кассового-order.css

HTTP; // yourstore / App_Themes / darkOrange / category.css

...

При нажатии на категорию «Книги» браузер запрашивает http; // yourstore / Category / 29-books.aspx) ваш HTML-источник будет содержать следующий HTML-код: 

<link href="../App_Themes/darkOrange/base.css" type="text/css" rel="stylesheet" />
<link href="../App_Themes/darkOrange/cart-checkout-order.css" type="text/css" rel="stylesheet" />
<link href="../App_Themes/darkOrange/category.css" type="text/css" rel="stylesheet" />

Браузер выполнит следующие запросы:

HTTP; // yourstore / Категория /../ App_Themes / darkOrange / base.css

HTTP; // yourstore / Категория /../ App_Themes / darkOrange / корзина кассового-order.css

HTTP; // yourstore / Категория /../ App_Themes / darkOrange / category.css

Прозрачный PNG в IE6

Пока все работает нормально. Чтобы сделать внешний вид постоянным во всех браузерах, необходимо загрузить специальную таблицу стилей IE6. Я узнал две важные вещи:

  1. Не добавляйте таблицу стилей в папку «App_Themes», а помещайте ее в отдельную папку.

  2. При ссылках на изображения используйте относительные пути, начинающиеся с одной косой черты.

Таблицы стилей и папка App_Themes:

Чтобы применить определенный макет к страницам, которые просматриваются в IE6, я создал новую таблицу стилей и поместил ее в папку «root / App_Themes / darkOrange / css». В файл 'root / MasterPages / Root.Master' я добавил следующие строки HTML-кода: 

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<![endif]-->

Когда файл Css помещается в папку «App_Themes» или в подпапку в «App_Themes», на него автоматически ссылаются. Это вызвало нежелательное поведение в браузерах не IE6. Макет IE6 был применен к странице и испортил внешний вид страницы.

При посадке на страницу по умолчанию (браузер запрашивает http; // yourstore / default.aspx) сервер проанализирует запрос. Полученный HTML-источник будет содержать следующий HTML-код: 

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<![endif]-->

Но также HTML содержит следующую строку: 

<link href="App_Themes/darkOrange/css/ie6.css" type="text/css" rel="stylesheet" />

Все браузеры будут запускать следующий запрос:

HTTP; // yourstore / App_Themes / darkOrange / CSS / ie6.css

IE6 запустит дополнительный запрос (файл будет извлечен из кэша IE):

HTTP; // yourstore / App_Themes / darkOrange / CSS / ie6.css

Это было нежелательное поведение, поэтому мне пришлось заменить файл ie6.css на новую папку. Теперь он помещен в «root / css / ie6.css».

Ссылки на изображения, перезапись URL и относительные пути:

Для поддержки прозрачных изображений png в IE6 файл ie6.css содержит некоторые свойства css 'filter'.

например. Один из селекторов div будет содержать следующую строку кода CSS: 

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='../App_Themes/darkOrange/img/transparent_image_example.png');

При посадке на страницу по умолчанию (браузер запрашивает http; // yourstore / default.aspx) IE6 будет запрашивать:

HTTP; // yourstore / IMG / transparent_image_example.png

При нажатии на категорию «Книги» браузер запрашивает http; // yourstore / Category / 29-books.aspx). IE6 запрашивает:

HTTP; // yourstore / IMG / transparent_image_example.png

В обоих случаях отображается «Страница не найдена» (HTTP / 1.1 404 Not Found).

После замены:

.. / App_Themes / darkOrange / IMG / transparent_image_example.png '

С:

/ App_Themes / darkOrange / IMG / transparent_image_example.png '

Все работало нормально.

Это потому, что относительный путь начинается с одной косой черты. Браузер будет интерпретировать URL следующим образом:

Это начинается с 'http; //'? Если да, это должен быть абсолютный путь; Если нет, это должен быть относительный путь.

Относительные пути:

Это начинается с одного слеша? Если да, это должна быть ссылка на абсолютный путь; Если нет, это должна быть ссылка на относительный путь

примечание: см. Раздел 5 «Относительные ссылки на URI» в документе «Унифицированные идентификаторы ресурсов (URI): общий синтаксис» (http://www.ietf.org/rfc/rfc2396.txt).

)

В случае переписанных страниц URL:

Браузер не будет работать при использовании «ссылок относительного пути» (например, «http; // yourstore / Category / 29-books.aspx» и «../App_Themes/darkOrange/img/transparent_image_example.png').*» 1161 *

Браузер преуспеет при использовании «ссылок на абсолютный путь» (например, «http; // yourstore / Category / 29-books.aspx» и «/App_Themes/darkOrange/img/transparent_image_example.png').

»
0 голосов
/ 04 июля 2009

Большая проблема с перезаписью URL-адреса заключается в том, что он винит вас при использовании относительных путей.

Например, если у вас есть файл в корневом каталоге приложения с именем page.aspx, который используется для страниц на нескольких уровнях навигации. например, 

Virtual Path    =>    Physical Path
 /              =>    /page.aspx?id=1
 /food/banana   =>    /page.aspx?id=2

Допустим, у вас есть относительный путь в page.aspx к вашему css-файлу, который находится в /css/main.css

<link rel="stylesheet" href="css/main.css"/>

Когда page.aspx выполняется из контекста / food / banana, браузер попытается найти /food/css/main.css, которого не существует.

То, как я это делаю, состоит в том, чтобы отключить перезапись URL для изображений, CSS, JS и иметь абсолютную ссылку на вашу таблицу стилей (и img src и JavaScript). Таким образом, вы можете гарантировать, что браузер всегда найдет его. Затем из таблицы стилей вы можете использовать относительные пути для фоновых изображений.

Я обнаружил, что этот метод проще всего поддерживать, поскольку вы не тратите недели на попытки переписать свои ссылки в обратном порядке.

0 голосов
/ 04 июля 2009

Вы можете использовать это: 

<a href="<% =GetBaseURL() %>/">Home</a>

public static string GetBaseURL()
{

string url =HttpContext.Current.Request.Url.Scheme + “://” + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.ApplicationPath.TrimEnd(’/') + ‘/’;

//EPiServer’s url start with a / so remove the url if (when) it contains one
if(url.EndsWith(”/”))
return url.Remove(url.LastIndexOf(”/”));
else
return url;
}
0 голосов
/ 23 декабря 2008

~ / будет работать только для тегов, которые имеют атрибуты runat = "server", потому что это говорит asp.net визуализировать элемент управления.

, например

не будет отображаться так, как вы ожидаете, потому что asp.net не отображает элемент управления. Вместо этого вы должны использовать.

Альтернативно разместите ссылку css в теге head, например



0 голосов
/ 16 декабря 2008

Я второй использую базовую ссылку. Несмотря на то, что вам нужно немного придумать разницу, когда сайт работает из корня домена, то есть по сравнению с сервером Visual Studio.

<base id="BasePath" runat="Server"/>

затем в мастер-код позади.

защищенный void SetBaseHref () {
if (Request.RawUrl! = Request.Url.PathAndQuery)
{
string baseUrl = ""; 

        if (Request.IsSecureConnection)
            baseUrl += "https://";
        else
            baseUrl += "http://";
        baseUrl += Request.Url.Host;

        if (Request.Url.Port != 80)
            baseUrl += ":" + Request.Url.Port.ToString();

        baseUrl += Request.RawUrl;

        BasePath.Attributes.Add("HREF", baseUrl);
    }

}

0 голосов
/ 07 декабря 2008

Я думаю, вам нужно исключить таблицы стилей и каталоги изображений из механизма перезаписи. Я не знаком с движком, который вы используете, но если вы используете правило перезаписи, которое переписывает на основе очень широкого правила, оно будет неправильно указывать на ваши таблицы стилей и изображения, а также на javascripts.

Вы также можете поэкспериментировать с базовым тегом. 

<base href="http://www.w3schools.com/images/" />

Попробуйте поместить его в <head>, указывая на папку с изображениями.

...