图片在博客显示各式各样，以美国超人气动画《Rick and Morty》图片为例，现在让我一一道来。
1.插入本地图片
引入本地图片分二种：•本地路径（放在static目录下） •相对路径（需与博客文件名一致且在同一路径）假如有一张关于动画的图片，路径放在根目录static/images下，图片命名是Rick and Morty.jpg。
1.1本地路径
！[Rick and Morty](/images/Rick and Morty.jpg)
1.2相对路径
！[Rick and Morty](Rick and Morty.jpg)
2.上传到对象存储COS
2.1带图片的文字链接
[Rick and Morty]（https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg)
2.2带网址的图片链接
[<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg" alt="Rick and Morty">](https://www.rickandmorty.com/)
2.3缩小图片
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%20and%20Morty.jpg" style="zoom:20%;" />
2.4扩大图片
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%20and%20Morty.jpg" style="zoom:150%;" />
2.5.1悬浮文字说明
2.6.1图片文字说明之一
|  |
|:--:|
| **Rick and Morty** |
|
|
|---|
| Rick and Morty |
2.6.2文字图片说明之二
{/{< figure src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg" title="Rick and Morty" >}/}(去掉斜杠即可)
2.7文字提示折叠图片
<details>
<summary>Rick and morty</summary>
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%20and%20Morty.jpg" style="zoom:10%;" />RICK:"Your future stems from your present,which,if you're living right.keeps changing.you're gonna be a lot happier if your focus on the moment.rather than on how you're gonna die.
</details>
Rick and Morty
RICK:"Your future stems from your present,which,if you're living right.keeps changing.you're gonna be a lot happier if your focus on the moment.rather than on how you're gonna die.
2.8添加动图
3.多图片处理方式
3.1HTML并列
<figure class="third">
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg"title="150" width="150" height="150">
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg"title="150" width="150" height="150">
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg"title="150" width="150" height="150">
</figure>
3.2简码图库并列
这个我在网上参考了atharva shah的简码日志Awesome Hugo Shortcodes For Your Websites，我所举列的是最常见的短码例子，详细情况可以参考其GitHub主题页面，参数配置可以根据自己的喜好来，配置好就行。😉
{/{< galleries >}}
{/{< gallery src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%20and%20Morty.jpg" title="Rick and Morty" >}}
{/{< gallery src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Morty.jpg" title="Rick1" >}}
{/{< gallery src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Morty2.jpg" title="Rick2" >}}
{/{< gallery src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick.jpg" title="Morty" >}}
{/{< gallery src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick2.png" title="Morty2" >}}
{/{< /galleries >}}(大括号"/"去掉就行)
