Проблема с фоновым изображением css и шрифтами с хостингом

я только недавно закончил кодировать свой первый веб-сайт, и я хочу его разместить. Мне удалось загрузить его на веб-хостинг, но у меня проблема с css. на локалке так выглядит сайт на локальном хосте

а на сайте так выглядит сайт на хостинге

мы можем ясно видеть, что работает только часть css фоновое изображение и шрифты не работают.

в сети консоли мы видим, что ссылка для ссылки на фоновое изображение неверна вот фото ошибки

поэтому ссылка в консоли /assets/css/img/1364.webp, но должна быть /assets/img/1364.webp

Итак, первое, что я сделал, это проверить ссылку в CSS.

вот часть кода css

body {
  background: url('../img/1364.webp') ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: Arial, Helvetica, sans-serif;
}

Мы видим, что URL-адрес начинается с «../», поэтому обычно он должен возвращаться из одной папки, поэтому перейдите в папку активов, где вы можете найти несколько вещей, таких как папка img. но он вообще не работает.

вот как я организую папку картинка из папки

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

Попробуйте url('assets/img/1364.webp') для фона и для css assets/css/samplename.css. Обычно я делаю это в общедоступной <папке для css>, <другой папке для js> <другой папке для изображений> и т. д., тогда все страницы находятся прямо под ней, а не в папке.

Crystal 05.05.2022 23:43

спасибо за ваш ответ, я попробовал вашу версию, и она все еще не работает, ссылка стала assets/css//assets/img/1364.webp. Это действительно странно

CeTonDestain 06.05.2022 00:04

где ты это делаешь?

Crystal 06.05.2022 00:17
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Можно ли использовать абсолютный путь для вас? Использование абсолютного пути — хорошая привычка, позволяющая избежать такой проблемы.

Я видел, что вы сказали, что ссылка становится /PATH/OF/CSS//your/specified/link, тогда это может быть конфигурация вашего хостинга, в качестве альтернативы вы можете использовать URL-адрес, например example.com/public_html/img/1364.webp.

почему я не подумал об абсолютном пути lmao. Да работает спасибо

CeTonDestain 06.05.2022 00:23

Другие вопросы по теме