网页渲染零碎知识

1. 相对路径

项目小白做大作业的时候相对路径总是搞得云里雾里的，课上老师不会讲这些知识点，浅浅记录一下

1. 引用上级文件： ../cover1.jpg
2. 引用同级文件： cover1.jpg
3. 引用下级文件： cover/cover1.jpg
4. 引用上上级文件： ../../cover1.jpg

<!-- 1.引用上级文件,为图片中例子 -->
<img src="../cover1.jpg" alt="cover1">

<!-- 2.引用同级文件  -->
<img src="cover1.jpg" alt="cover1">

<!-- 3.引用下级文件 -->
<img src="cover/cover1.jpg" alt="cover1">

<!-- 4.引用上上级文件 -->
<img src="../../cover1.jpg" alt="cover1">

参考：相对路径和绝对路径？简洁易懂解释+实例 - 知乎 (zhihu.com)

2. 插入图片

学会如何引用相对路径以后就可以尝试在博客中插入图片了

• 在md文件中插入图片的语法为![]()。

​ 其中方括号是图片描述，圆括号是图片路径。

​ 注意：对于hexo来说它的资源文件的根目录就是source,当然你也可以修改_config.yml改变这个配置

• 网上插入图片的方法众多，一下是我采用的方法：

在Hexo的目录source中创建一个图片文件夹，例如pic

设置路径：

![image-20240130114356739](../pic/pic1.png)

测试下是否可以显示

好，可以显示

参考：Hexo 添加图片——不用插件，超简单_hexo添加图片-CSDN博客

由于我是在typora上写的博客，所以路径与参考博客不太一样，参考博客的路径在typora中无法显示图片

此外，该方法似乎有些弊端，评论区有人指出该方法到后期会遇到一个问题就是占用空间太大，Github是有项目大小限制的，如果遇到更简单的方法我也会更新。