#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.