为什么本地图片部署时可以显示,当时发布到 github page 中就不行呢?
需要检查图片链接使用的是绝对地址还是相对地址。
无论我们在HTML的头部添加CSS的链接地址,还是为<img>
或者<a>
标签添加链接,我们总是需要告诉浏览器,我们的图片存在什么地方,以方便浏览器定位资源。
这里有两种定位方式,绝对路径
和相对路径
。
绝对路径
可以想象成是经纬度,比如你把一张图片存放在极简图床,复制出来的链接只要有网络谁都可以打开,这种链接就是绝对路径:https://static.zhihu.com/static/revved/img/ios/touch-icon-152.87c020b9.png
相对链接
指的是同处于一个系统中文件与文件之间的相对位置。我们来看一下在一个常规的网站文件夹中:
mysite - js - dance.js - move.js - css - style.css - otherstyle.css - images - cat.png - mouse.jpg - index.html
如果我们在Index.html想通过相对位置找到style.css,就可以css/style.css
,因为index.html和css是处在同一级目录;那如果我们想要在css文件夹中的style.css中使用cat.png,我们应该怎么定位呢?
我们还是可以使用相对路径:../images/cat.png
,这里的..
表示“请往上一个层级”,因为style.css和cat.png不是在同一个文件夹内,需要跳出到mysite在这个文件夹,才可以找到images这个文件夹里面的cat.png。