Блог

Главная - Вопросы по программированию - На страницах Github не отображаются значки и изображения моего CSS

На страницах Github не отображаются значки и изображения моего CSS

#html #css #github-pages

#HTML #css #github-страницы

Вопрос:

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

 .header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('/assets/icons/down-arrow.svg');

таким образом я разместил большинство изображений, но все же могу найти, где я ошибаюсь?

это ссылка на мой репозиторий https://github.com/AlejandroCaputo/Batatabit_CryptoProject

это ссылка на мою страницу на github https://alejandrocaputo.github.io/Batatabit_CryptoProject/index.html

чего мне не хватает?

Ответ №1:

Причина проблемы с тем, что изображения значков не отображаются, связана с «ссылочным путем» изображений.

Например, изображение с именем « down-arrow.svg is

на самом деле находится по адресу

/Batatabit_CryptoProject/assets/icons/down-arrow.svg ,

но упоминается как:

  /assets/icons/down-arrow.svg

Проблема может быть решена 2 способами:

  1. Обратитесь к изображению с его фактическим полным путем, т.Е. с помощью /Batatabit_CryptoProject/assets/icons/down-arrow.svg
  2. Обратитесь к изображению, используя относительный путь, т.Е. удалив начальный / из ссылки на изображение.

Ответ №2:

Похоже, ваш путь был неправильным. Удалите / предыдущие ресурсы

 .header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('assets/icons/down-arrow.svg');

Ответ №3:

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

 .header--button span {
  display: inline-block;
  width: 13px;
  height: 8px;
  margin-left: 10px;
  background-image: url('./assets/icons/down-arrow.svg');
}

Ответ №4:

Я надеюсь, что ваша проблема решена. Но в следующий раз, если вы не можете понять, как решить эту проблему! просто скопируйте адрес изображения / значка из вашего репозитория github. Откройте изображения из вашего репозитория и скопируйте из него адрес, а затем вставьте ссылку в свой imge src. Тогда это сработает. как и ваша ссылка на значок в репозитории git: https://raw.githubusercontent.com/AlejandroCaputo/Batatabit_CryptoProject/069113465c3018bc1b4835cfaa2f658c5be68f0c/assets/icons/batata.svg вы должны разместить эту ссылку в своей опции code icon src.

Метки: