Фоновое изображение url () работает на живом сервере, но когда я открываю index.html в браузере, это не так? - PullRequest
0 голосов
/ 30 сентября 2018

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

Я пробовал:

  1. img / hero.jpg - работает, когда я нажимаю на ссылку в VS Code
  2. / img / hero.jpg - работает, когда я нажимаю
  3. .. / .. / hero.jpg - работает, когда я нажимаю
  4. .. / img / hero.jpg - не работает
  5. полный путь - работает, когда я нажимаю

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

Вот структура файла.

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Он работает на живом сервере, потому что его настройки делают местоположение index.html корневым каталогом вашего документа (/).Когда вы открываете index.html напрямую, ваш корень отличается, и изображения не загружаются из правильного места, если вы начинаете путь с /.

Best Practice

Рекомендуется использовать относительные пути к файлам (если это возможно).

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

0 голосов
/ 30 сентября 2018

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

На вашем сервере ваши файлы находятся где-то вроде

/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png

На вашем компьютере ваши файлы находятся где-то вроде

C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png

И в ваших стилях.css у вас есть что-то вроде этого,

body {
    background-image: url('/img/background.png');
}

Начиная URL с /, браузер должен интерпретировать его как корневой каталог.На ПК с Windows это будет C:\, а на ПК с Linux это будет /.

Однако, когда вы открываете страницу, когда она подключена к Интернету по URL-адресу, подобному https://example.com, корневой каталог становится https://example.com/.

Следовательно, использование /img/background.png заставит ее искатьизображение в https://example.com/img/background.png, как только оно в сети, но на вашем локальном компьютере оно будет искать изображение в C:\img\background.png

Начиная URL без слеша, img/background.png ищет изображениеотносительно папки, в которой находится файл css. Так что в этом случае он будет искать фон здесь https://example.com/css/img/background.png, а на вашей локальной машине он будет выглядеть C:\Users\Nani\Desktop\Website\css\img\background.png

В моем примереЛучшее решение было бы использовать ../img/background.png, который будет искать один каталог относительно папки css, а затем в папке img.Это будет работать согласованно как на вашем компьютере, так и после загрузки.

Этого должно быть достаточно, чтобы выяснить, что вам нужно сделать, предполагая, что проблема заключается в том, как объявляется путь URL-адреса.В противном случае проблема может быть в чем-то другом.Например, кажется, что вы используете SCSS.Возможно, SCSS не скомпилирован на вашем локальном компьютере (или давно не был), но скомпилирован на работающем сервере?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...