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

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

в том числе:

Полный путь:

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

Относительное расположение по сравнению с местом нахождения css:
```
#cluetip-waitimage {
    background-image: url(jQueryUI/images/ui-anim_basic_16x16.gif);  
}
```

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

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

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

Ответ 1

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

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

Ответ 2

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

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-адресов, это должно работать практически в любой ситуации, если сервер, на котором вы размещаете его, не имеет ничего очень неудобно настроенного - и в этом случае стандарты и методы не заставят вас слишком далеко.

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

Ответ 3

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

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