Github pages отказывается показывать изображения

Question

Последние два часа я вырывал свои волосы, пытаясь заставить страницы Github показывать изображения.

Я создал персональный сайт (username.github.io/) в Jekyll и хочу развернуть на нем страницы проекта.Я сделал репозиторий github test-class и превратил его в страницу проекта.Github размещает его просто отлично от username.github.io/test-class, но он отказывается показывать изображения.

Вот базовый пример.У меня есть этот пост:

, который выглядит на Github следующим образом:

и так, когда я работаю на местном уровне:

, но на страницах Github это не отображается:

, хотя в браузере все выглядит хорошо:

Эта точная система прекрасно работает намой личный сайт (username.github.io).Почему на земле это терпит неудачу сейчас?

РЕДАКТИРОВАТЬ : я должен отметить, что я пробовал несколько разных путей и ни один из них не работает.Я даже попытался поместить изображение в ту же папку, что и файл уценки.Это также не работает.

Answer 1

Ваша веб-страница / веб-сайт находится в подпапке (тест-класс).Обычно вы ссылаетесь на это, используя переменную {{ site.baseurl }}.Это должно быть установлено в файле _config.yml следующим образом (просто добавьте эту строку в файл):

baseurl: /test-class

Ссылки на изображения по-прежнему должны иметь этот baseurl в своем пути, поэтому вам все равно придется писать:

![](/test-class/images/llama.jpeg)

... или (лучше) что-то вроде того, что советовал yuyokk здесь :

![]({{ site.baseurl }}/images/llama.jpeg)

Эта команда указывает серверу посмотреть на кореньдомен (первая косая черта) и в подпапке «test-class».Там должна существовать папка с изображениями, содержащая файл 'llama.jpeg'.

---

![](images/llama.jpeg)

Обратите внимание, что приведенная выше команда может работать и для домашней страницы, так как она указывает серверу на просмотр подпапки.'images' в местоположении текущей страницы.Для любой другой страницы это может произойти сбой, поскольку они могут иметь другой путь (другую виртуальную или реальную папку).

Answer 2

Единственное решение, которое я нашел до сих пор, это ссылка на размещенное изображение:

![](https://username.github.io/test-class/images/llama.jpeg)

EDIT .Я нашел решение вчера вечером, когда пытался решить другую проблему, которая, на мой взгляд, была другой, но на самом деле была такой же.Оказывается, что относительные ссылки на страницах github очень хитры. Это сообщение об ошибке github , относящееся к 2011 году, указало на это.

Способ only , позволяющий github размещать страницу из репозитория проекта, а не своего личного сайта, задает baseurl в вашем _config.yml:

baseurl: test-class/

и затем назовите каждую картинку ссылку (используя мой пример)

![]({{site.basurl}}/images/llama.jpeg)

, в то время как

![](test-class/images/llama.jpeg)

будет не работать.

Правило baseurl применяется ко всем ссылкам.Например, если вы делаете collection и пытаетесь создать индекс со ссылками на все страницы в этой коллекции, вы должны явно ссылаться на baseurl:

{%- for tutorial in site.tutorials -%}
    <li>
        <a href="{{ site.baseurl }}{{ tutorial.url }}">
        {{ tutorial.title | escape }}
        </a>
    </li>
{%- endfor -%}  

, за исключением того, что теперь вам нужно drop трейлинг /.

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

РЕДАКТИРОВАТЬ 2 .Уловка baseurl даже не упоминается в документах Джекила . Здесь - более подробное объяснение.