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

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


image css asp.net-mvc relative-path
person leora    schedule 20.04.2011    source источник
comment
На самом деле не уверен, какое это имеет отношение к MVC. Маршрутизация не имеет ничего общего с css и файлами изображений.   -  person Charles Boyung    schedule 20.04.2011
comment
Я также не вижу, какое это имеет отношение к MVC.   -  person Ciel    schedule 20.04.2011
comment
Это хороший вопрос. В MVC вы можете направить любой URL-адрес с любым количеством символов / и направить его в любое представление. В WebForms был только 1 маршрут, поэтому эту проблему нужно было решить только один раз, и сработало несколько методов ссылок на изображения и css. Теперь я чувствую, что меня подтолкнули к полному URL-адресу или чему-то относительно корня домена.   -  person MatthewMartin    schedule 08.07.2015

Ответы (3)


arrow_upward
6
arrow_downward

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

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

person Charles Boyung    schedule 20.04.2011

arrow_upward
4
arrow_downward

я вообще так делаю...

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

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

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

  • Solution
    • Controllers
    • Content
      • JQuery
        • images

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

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

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

person Ciel    schedule 20.04.2011
comment
Как это позволит вам поместить приложение в любую папку и запустить его без осложнений? Если ваше приложение находится в корневой папке вашего сайта, оно будет работать нормально, но если вы поместите свое приложение в папку /MyApp на веб-сайте, все ваши ссылки на изображения будут неработающими, потому что они все равно будут искать / content/jquery/images/ui-anim_basic_16x16.gif вместо /MyApp/content/jquery/images/ui-anim_basic_16x16.gif. - person Charles Boyung; 20.04.2011
comment
Позвольте мне перефразировать. Это позволит вам перемещать файлы без особого риска нарушения ваших URL-адресов. На самом деле нет «правильного» способа сделать это, это просто то, что я нашел, работает лучше всего для меня. - person Ciel; 20.04.2011
comment
Что касается вашего комментария о его поломке, возможно, вы правы. Я никогда не сталкивался с этим, хотя. Всякий раз, когда я помещаю приложения во вложенные папки, я всегда вижу, что папка верхнего уровня конкретного приложения рассматривается как корневая папка. Возможно, я просто никогда не сталкивался с серверной средой, настроенной так, как у вас. - person Ciel; 20.04.2011
comment
Я не знаю, как вы могли видеть папку верхнего уровня для приложения в качестве корневой папки. Это невозможно ни в одной серверной среде. Дело даже не в сервере, а в том, как работают HTML и CSS. Если ваше приложение находится на www.mysite.com/myapp, то ссылка на /content/images/myimage.gif будет указывать на www.mysite.com/content/images/myimage.gif не www.mysite.com/myapp/content/images/myimage.gif. Никакая конфигурация сервера этого не изменит. - person Charles Boyung; 20.04.2011
comment
Возможно, вы правы, просто у меня никогда такого не было. Возможно, виртуальные папки IIS как-то связаны с этим? В любом случае, я понимаю, что вы говорите, и это имеет смысл. - person Ciel; 20.04.2011
comment
Нет, поверьте мне, виртуальные папки здесь абсолютно ни при чем. Это будет работать так же с виртуальными папками или нет. Вернитесь и посмотрите, что на самом деле делают ваши сайты — я уверен, вы увидите то же самое. - person Charles Boyung; 20.04.2011

arrow_upward
0
arrow_downward

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

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

person KevinVictor    schedule 11.04.2016