в asp.net.mvc, как правильно ссылаться на изображения внутри CSS - PullRequest
Новая
       1

в asp.net.mvc, как правильно ссылаться на изображения внутри CSS

15 голосов
/ 20 апреля 2011

Я просматриваю сайт и вижу много разных соглашений о том, как изображения являются ссылками в CSS на сайте asp.net-mvc.

включая:

  1. Полный путь : 

    .ddTitle span.arrow {
    background: url('/content/images/dd_arrow.gif') no-repeat 0 0;
}

  2. Относительное местоположение по сравнению с местом расположения css: 

    #cluetip-waitimage {
    background-image: url(jQueryUI/images/ui-anim_basic_16x16.gif);  
}

  3. Относительно ".." 

    #cluetip-waitimage {
    background-image: url(../../jQueryUI/images/ui-anim_basic_16x16.gif);  
}

В asp.net-mvc, с маршрутизацией и т. один правильный, а другие неправильные или это просто предпочтение или соглашение? Предположим, что этот сайт может находиться в общей среде с другими сайтами.

Ответы [ 3 ]

6 голосов
/ 20 апреля 2011

Ваш первый вариант вполне подходит, если ваше приложение всегда будет в корневой папке сайта (или, по крайней мере, все ваши изображения будут в корневой папке). Если у вас может быть другой путь в разных ситуациях (например, наличие общего сайта при разработке или тестировании), тогда это не сработает.

Второй и третий варианты в основном одно и то же. Какой из них использовать, полностью зависит от того, где находятся изображения по отношению к файлу CSS. Я лично считаю, что второй выглядит чище, поэтому я стараюсь помещать любые изображения, на которые ссылаются мои CSS-файлы, в структуру папок относительно места расположения CSS. Однако некоторые люди предпочитают хранить все изображения в одном месте (даже смешивая изображения контента с изображениями «хрома» сайта), и поэтому для этого может потребоваться использовать относительный путь с ../.

4 голосов
/ 20 апреля 2011

Обычно я делаю это так ...

background-image: url('/jQuery/images/ui-anim_basic_16x16.gif');

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

Так что, если ваши изображения были такими ...

  • Решение
    • Контроллеры
    • Содержимое
      • JQuery
        • изображения

Ваш путь будет background-image: url('/content/jquery/images/ui-anim_basic_16x16.gif');

Такой путь устраняет большинство последствий любого вида пути.Поскольку ASP.NET как язык понимает концепцию относительных URL-адресов, это должно работать практически в любой ситуации, если только сервер, на котором вы его размещаете, не настроен очень неловко - и в этом случае стандарты и практики не дадут вам слишкомдалеко.

Root-Relative Urls также делают ваше приложение намного более модульным, по моему опыту.Здесь могут быть более опытные программисты, которые могут опровергнуть это по какой-то причине, но из всего, что я построил, создание всех моих URL-адресов изображений, относящихся к корню, позволило мне перенести мою программу в любую папку и запустить ее без осложнений.

0 голосов
/ 11 апреля 2016

У меня был похожий вопрос. Поскольку MVC позволяет использовать ~ / (например, в видах бритвы) для обозначения корня приложения, я подумал, следует ли это сделать для путей к изображениям в моих файлах CSS.

Конечно, поскольку CSS-файлы не обрабатываются на стороне сервера, это не будет работать. Однако я считаю, что правильный путь - использовать относительные пути. Это должно быть хорошо, потому что путь к файлу CSS (в макете, например) может использовать ~ /, и тогда путь от файла CSS к изображению будет фиксированным; и не имеет значения, где находится корень приложения ... или если макет или основной вид находятся в другой области.

...