Изображения, определенные в CSS, не отображаются на развернутом сайте MVC3

Question

Я создал базовый сайт MVC3 и добавил пути к изображениям в файл site.css (часть исходного шаблона).

Когда я запускаю приложение через dev studio, сайт выглядит нормально и отображаются изображения.

Когда я собираю свой установщик и размещаю сайт на моем сервере, изображения не отображаются.

Вот пример моего css-файла:

#CustomerLogo
{
    position: relative;
    margin-left:auto;
    margin-right: auto;
    width: 300px;
    height: 96px;
    background-image: url(/Content/themes/base/images/CustomerLogo.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgb(41,139,178);
}

Answer 1

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

background-image: url(themes/base/images/CustomerLogo.jpg);

Answer 2

Помимо гарантии того, что изображения действительно загружены на сервер, вы можете проверить, действительно ли приложение на сервере запущено в корневом каталоге /.Например, если ваш сайт расположен по адресу facebook.com/myGreatApp с префиксом URL-адреса /, вы говорите браузеру искать изображения на facebook.com/Content / ..., который является корневым, а не facebook.com / myGreatApp / Content /...

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

Answer 3

Вы пробовали относительный путь?Предполагая, что ваш файл CSS находится в ~/Content/themes/base, это должно работать:

background-image: url(images/CustomerLogo.jpg);

Answer 4

Вы уверены, что URL работает?Если вы пытаетесь получить доступ к URL напрямую через адресную строку, видите ли вы изображение?

Answer 5

Вам может понадобиться .., чтобы помочь найти папку с содержимым,

Пример:

background-image: url(../Content/themes/base/images/CustomerLogo.jpg);