Как указать правильный путь к файлу с изображением в html?

Ссылка скопирована
1 ответ

Создаю сайт на python flask. Когда в html коде страницы с адресом "/" ( @app.route('/') ) я указываю путь к изображению, которое лежит в static/images/, все работает. Однако когда я указываю путь к этому же изображению в коде страницы с любым другим адресом (например, @app.route("/index") ), изображение на сайте не появляется, а в логах видно, что к пути изображения почему-то прибавился адрес страницы, и поэтому оно не было найдено: /index/static/images/2.png HTTP/1.1" 404 -

Дополнительно:

кури основы https://htmlbook.ru/samhtml/ssylki/absolyutnye-i-o...

Ответы:

Если вы найдете объяснение, в чем различие между этими ссылками (не только наличие или отсутствие слеша), то у вас никогда эта проблема не возникнет.
static/images/2.png
/static/images/2.png

  • Хм, хочу попробовать угадать. Верхняя - ищем рядом, вторая - ищем извне? Или я совсем мимо?
  • Ну, тут теория относительности играет роль.
    1) ссылка, переход работает относительно текущей страницы.
    Если страница имеет адрес протокол://домен/index, то ссылка static/images/2.png будет обращаться к протокол://домен/index/static/images/2.png.
    2) ссылка, переход работает относительно домена.
    На любой странице одного и того же домена, ссылка будет вести на протокол://домен/static/images/2.png
    3) есть вариант //домен/static/images/2.png. Тогда вы можете делать вариативным протокол перехода по ссылки относительно текущей страницы.

Почитай, как работают относительные URL.
Если коротко, то, находясь на https://example.com/some/stuff.html, следующие URL будут работать так:
https://example.com/something/else.html ведёт на https://example.com/something/else.html
//example.com/something/else.html тоже ведёт на https://example.com/something/else.html, при этом https взято из текущего адреса
/something/else.html тоже ведёт на https://example.com/something/else.html, при этом схема и имя сайта взяты из текущего адреса, а путь считается от корня.
something/else.html ведёт на https://example.com/some/something/else.html (схема, имя сайта и имя каталога взяты из текущего адреса, от них считается путь).

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Стас DB Ответ

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

1. Абсолютный путь: Абсолютный путь указывает полный путь к файлу на сервере. Например, если изображение находится в папке "images" на сервере, то путь может выглядеть следующим образом:

 <img src="http://www.example.com/images/image.jpg" alt="Image">

<img src="http://www.example.com/images/image.jpg" alt="Image">

2. Относительный путь: Относительный путь указывает путь к файлу относительно текущего расположения HTML-файла. Например, если изображение находится в той же папке, что и HTML-файл, то путь может выглядеть так:

 <img src="image.jpg" alt="Image">

<img src="image.jpg" alt="Image">

Если изображение находится в папке "images" относительно HTML-файла, то путь будет выглядеть так:

 <img src="images/image.jpg" alt="Image">

<img src="images/image.jpg" alt="Image">

3. Использование корневого пути: Корневой путь указывает путь от корневой директории веб-сайта. Например, если изображение находится в папке "images" от корня веб-сайта, то путь может выглядеть так:

 <img src="/images/image.jpg" alt="Image">

<img src="/images/image.jpg" alt="Image">

4. Использование относительного пути с переходом на уровень выше: Если изображение находится в папке "images", которая находится на уровень выше относительно HTML-файла, то путь будет выглядеть так:

 <img src="../images/image.jpg" alt="Image">

<img src="../images/image.jpg" alt="Image">

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно