#html #image #relative-path
Вопрос:
я практикуюсь в html с помощью своего компьютера и запускаю html-файл с помощью надстройки «Live Server» в vscode. изображение не отображается с относительным путем:
lt;img src="../html/images/coffee background.jpeg" alt="tx"/gt;
моя корневая папка-это css
папка, которую я открыл в vs-коде. index.html
хранится в этой css
папке.
изображение хранится в images
папке внутри html
папки, которая хранится в папке выше css
.
с помощью элемента inspect по ссылке img в браузере отображается следующее: Не удается получить /html/images/coffee background.jpeg
я почти уверен, что этот относительный путь верен, потому что, когда я нажимаю «перейти по ссылке» в vs-коде при наведении курсора мыши на ссылку, изображение отображается в vs-коде. почему изображение не отображается при запуске html-файла?
Комментарии:
1. Опубликован ли файл? Также можете ли вы попробовать использовать такое имя файла, как
/simple.jpg
?
Ответ №1:
На веб-сервере вы не можете опуститься ниже веб-корня, в то время как в VSCode вы можете (я полагаю, вы можете перейти к корневому каталогу диска).
Поэтому, когда вы говорите,
моя корневая папка-это папка css, которую я открыл в vs code. index.html хранится в этой папке css.
это означает, что вы не можете ввести «родственную» папку css. Точно так же, как при запуске и наличии вашего корня /var/www/customer1_pages
вы , очевидно, не можете получить доступ «../customer2_pages/passwords.txt».
../html/images
(но также ../../../html/images
и т. Д.) — Это то же самое /html/images
, что и (для веб-сервера) означает lt;ROOTgt;/html/images
, что в вашей файловой системе будет css/html/images
.
Вам нужно установить корневую папку html
и поместить туда индекс. Или перемещайте изображения внутри css.