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

ProgramBox

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

Post author:admin
Запись опубликована:17 мая, 2023
Post category:Вопросы по программированию

#css #asp.net-mvc #image #relative-path

#css #asp.net-mvc #изображение #относительный путь

Вопрос:

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

2. Я также не понимаю, какое это имеет отношение к MVC.

3. Это хороший вопрос. В MVC вы можете перенаправить любой URL с любым количеством / ‘s в нем и перенаправить его в любое представление. В WebForms был только 1 маршрут, поэтому эту проблему нужно было решить только один раз, и сработало несколько методов ссылки на изображения и css. Теперь я чувствую, что меня подталкивают к полному URL или чему-то относительно корня домена.

Ответ №1:

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

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

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

1. Как это позволит вам поместить ваше приложение в любую папку и запустить его без осложнений? Если у вас есть ваше приложение в корневой папке вашего сайта, тогда оно будет работать нормально, но если вы поместите свое приложение в папку «/ MyApp» на веб-сайте, все ваши ссылки на изображения будут разорваны, потому что они все равно будут искать «/content/jquery/images/ui-anim_basic_16x16.gif «вместо» /MyApp/content/jquery/images/ui-anim_basic_16x16.gif «.

2. Позвольте мне перефразировать. Это позволит вам перемещать файлы без особого риска нарушения ваших URL-адресов. На самом деле «правильного» способа сделать это не существует, это как раз то, что, как я обнаружил, работает для меня лучше всего.

3. Что касается вашего комментария о его нарушении, возможно, вы правы. Я никогда с этим не сталкивался. Всякий раз, когда я помещаю приложения во вложенные папки, я всегда вижу папку верхнего уровня конкретного приложения, рассматриваемую как корневая папка. Возможно, я просто никогда не сталкивался с серверной средой, настроенной так, как у вас.

4.Я не знаю, как вы могли видеть папку верхнего уровня для приложения в качестве корневой папки. Это невозможно ни в одной серверной среде. Это даже не серверная вещь — это то, как работают HTML и CSS. Если ваше приложение находится в, www.mysite.com/myapp тогда ссылка на /content/images/myimage.gif будет указывать на www.mysite.com/content/images/myimage.gif not www.mysite.com/myapp/content/images/myimage.gif . Никакая конфигурация сервера этого не изменит.

5. Нет, поверьте мне, виртуальные папки не имеют к этому абсолютно никакого отношения. Это будет работать так же с виртуальными папками или нет. Вернитесь назад и посмотрите, что на самом деле делают ваши сайты — я уверен, вы увидите то же самое.

Ответ №3:

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

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