在Hexo文章中插入图片

在写上一篇博客的时候,发现不知道该怎么往文章中插入图片,于是在网上搜。答案来来回回就那么两篇。于是就打开一个照着步骤做。

然后在操作的过程中,踩到了各种奇奇怪怪的坑。

汪的一声就哭了
虽然在自己的不懈努力下

最后终于显示成功了。
可是,你不就一个低画质表情包吗!为什么显示这么大!!

觉得可能是hexo主题的问题。既然这样,只能修改CSS。可是主题CSS一改,所有图片的样式都会受到影响。
在一番搜索过后,发现hexo可以直接使用img标签,在要添加图片的md文件所在的位置创建一个同名文件夹,把图片放在里面。然后把样式写在img标签里面。
すると:

1
<img src="/pic02.jpg" alt="" style="width:100px;height:100px">

完美解决问题。当然,我的第一种插入图片方法只需要下面这几步。

  1. 安装插件

    1
    cnpm install hexo-asset-image --save
  2. 在要添加图片的md文件所在的位置创建一个同名文件夹,把图片放在里面。

  3. 在md文件中使用 !(图片描述)[xxx.png]

  4. hexo g -d 重新发布

如果出了意外,那就去Google吧。。

顺便,在我不断地重新发布并查看页面的时候。明明源码已经修改过来,可是网页上显示的页面还是不变。一定是缓存的问题。于是我清空浏览器缓存,果真OK了。

可是!每次调试都要清缓存真的好麻烦。。。

好在我发现了ctrl+F5 这个清缓存刷新的神奇快捷键。。。
如果有遇到需要经常清缓存刷新的,这样方便多了。。
nice,插入图片已经不是问题了。
顺便,👇用这种方法可以把图片显示在文字右边,就像这样👉

1
<img src="/pic03.jpg" alt="" style="width:100px;height:100px" align="right">