HTML - выбор изображений Корневой папки из подпапки

скажем, что следующая структура DIR моего сайта

Теперь в index.html я могу просто ссылаться на изображения типа

<img src="./images/logo.png">

но что, если я хочу передать одно и то же изображение fron sub.html, что будет src

Ответ 1

<img src="../images/logo.png">
          __ ______ ________
          |    |       |
          |    |       |___ 3. Get the file named "logo.png"
          |    |
          |    |___ 2. Go inside "images/" subdirectory
          | 
          | 
          |____ 1. Go one level up

Ответ 2

../images/logo.png вернет вам одну папку.

../../images/logo.png вернет вам две папки.

/images/logo.png вернет вас в корневую папку независимо от того, где вы находитесь/.

Ответ 3

Относительная ссылка будет

<img src="../images/logo.png">

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

Например, если ваше дерево каталогов, указанное в вашем вопросе, относится к корню сервера, то index.html и sub_folder/sub.html будут использовать:

<img src="/images/logo.png">

Если папка с изображениями находится в корневом каталоге приложения типа foo ниже корня сервера (например, http://www.example.com/foo), то index.html(http://www.example.com/foo/index.html), например, sub_folder/sub.html(http://www.example.com/foo/sub_folder/sub.html) оба используют:

<img src="/foo/images/logo.png">

Ответ 4

Ваш index.html может просто сделать src="images/logo.png" и из sub.html вы бы сделали src="../images/logo.png"

Ответ 5

../ переносит одну папку вверх по дереву каталогов. Затем выберите нужную папку и ее содержимое.

../images/logo.png

Ответ 6

когда вы загружаете файлы на сервер, будьте осторожны, некоторые ваши изображения не будут отображаться на веб-странице, и появится аварийный значок, который означает, что ваш путь к файлу неправильно упорядочен или закодирован, если у вас есть следующая структура файла код должен быть таким Структура файла: - > веб (основная папка) → изображения (вложенная папка) → logo.png(изображение в подпапке) ниже приведенный ниже код

 <img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

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

 <img src="images/logo.jpg" alt="image1" width="50px" height="50px">

спасибо- > vamshi krishnan

Ответ 7

когда вы загружаете файлы на сервер, будьте осторожны, некоторые ваши изображения не будут отображаться на веб-странице, и появится аварийный значок, который означает, что ваш путь к файлу неправильно упорядочен или закодирован, если у вас есть следующая структура файла код должен быть похож на эту структуру файла: → web (основная папка) → изображения (вложенная папка) → logo.png(изображение в подпапке) ниже приведенный ниже код

< img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

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

<img src="images/logo.jpg" alt="image1" width="50px" height="50px">

спасибо- > vamshi krishnan