Почему я не могу отображать изображения при использовании страниц github? - PullRequest
1 голос
/ 26 мая 2019

У меня есть тестовый сайт, на котором есть только один тег изображения, который я не могу загрузить:

https://jamie -siminoff-007.github.io /

Индексный файл:

<!DOCTYPE html>
<html>
  <body>
    <img src="_heart.png" alt="foo">
  </body>
</html>

Это git-страница, поэтому она полностью размещена на GitHub, а репозиторий находится здесь:

https://github.com/jamie-siminoff-007/jamie-siminoff-007.github.io

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

К вашему сведению, я могу вставить то, что я называю необработанной ссылкой, как показано ниже для src, и это работает:

https://raw.githubusercontent.com/jamie-siminoff-007/jamie-siminoff-6.github.io/master/_heart.png

но это не похоже на правильный путь. Конечно, когда GitHub создавал страницы, у них был способ использовать относительные пути.

1024 * Исследование *

Изображения на страницах github и относительные ссылки ... не связано

https://pages.github.com ... ничего не важно

https://help.github.com/en/categories/github-pages-basics ... ничего на изображениях

Подробнее.

Я обнаружил, что в google dev tools есть замечательная функция, с помощью которой вы можете изменить атрибут src изображения, и он будет обновлять страницу в реальном времени.

Вот так я узнал, что сырая ссылка работает.

Подробнее.

Я начинаю думать, что мои страницы GitHub нуждаются в дальнейшей настройке, но я не уверен.

Я проверил свою конфигурацию, и я настроен на публикацию в главной ветке, что является хорошим b.c. это единственная ветка, которая у меня есть.

1 Ответ

1 голос
/ 26 мая 2019

Похоже, ваш src выдает ошибку 404 (файл не найден). Для меня этот источник работает: "https://raw.githubusercontent.com/jamie-siminoff-007/jamie-siminoff-007.github.io/master/_heart.png"

<html class="gr__jamie-siminoff-007_github_io"><head></head><body data-gr-c-s-loaded="true">
    <img src="https://raw.githubusercontent.com/jamie-siminoff-007/jamie-siminoff-007.github.io/master/_heart.png" alt="foo">
  


</body></html>
...