前言

最近学习弹性布局,练习写了个百度热点新闻页面,开发工具是VisualStudioCode。写完之后在VScode中以【open with live server】的方式打开可以正常运行,图片也正常显示。然而,当在文件夹中双击打开时,图片无法显示。

出错原因

图片的img标签属性src写的是

/images/11.png

修改成下面的语句1或语句2后成功显示

./images/11.png
images/11.png

分析

相对路径是相对于某个基准目录的路径,指以当前文件所在目录而言某文件的位置。绝对路径是指文件真正存在的路径,指对站点的根目录而言文件的位置。其中“/”表示根目录,“./”表示当前目录,“../”表示上级目录。

所以,错误写法以“/”开头表示的是绝对路径。对于本项目来说,html文件和图片所在文件夹images在同一目录下,项目在本地“D:\news\Baidu\BaiduNews”路径下。所以html文件的根目录是D盘,“/images/11.png”指的是查找根目录D盘下的images文件夹里的图片,而真正的图片在“D:\news\Baidu\BaiduNews\images\”下,所以图片无法正确获取。

至于为什么在VSCode中能正常获取图片,因为项目文件夹恰好在开发工具的根目录下,所以两种路径都能获取到。

路径中的~/

在linux中,~/代表当前用户的home目录。

说点什么
欢迎骚扰,有缘人互加友链
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...