hexo主页图片显示问题
问题描述
用hexo+typora写博客时会面临一个图片显示的问题。
md文件中插入图片，md的语法为
1 | ![]() |
其中【】里写图片文件的描述
（）里填写图片的src (可以是网络地址，也可以是本地的绝对或相对地址)
初期的时候为了图片的统一管理，我们会在myblog->source 文件下建立个img文件夹，图片都放在这个文件夹里，在编写博客文章的时候通过相对引用 比如：../img/xxx.png 来插入这张图片。(在typora的设置中的也对图片的存放提供了很好的支持)
通过hexo 发布服务后我们能在文章中正确浏览到该图片
但是在博客的主页中 文章中如果有图片却看不到图片。
在hexo的官方文档中也有说明：
https://hexo.io/zh-cn/docs/asset-folders
解决办法
网络上有很多方案比如安装 hexo-asset-image 第三方插件、还有编写hexo过滤器等等。
比如这篇网站就说写给拦截器（我看到这篇尝试修改源码但没成功）
https://www.cnblogs.com/guide2it/p/11111715.html
安装第三方插件的方式我也没有使用，因为有人说很久没维护了。我没安装是因为实在是不喜欢给电脑上安装太多东西。
官方提供了解决方案
https://hexo.io/zh-cn/docs/asset-folders
说实话我没看懂：
我曾以为是在 头部的标签中加入这些代码
还以为: “不是 markdown” 是不是不能下载md文件里，我差点去源代码的文章模块js中 写了。
然后把那段代码贴到typora 中，typora没有实时显示图片然后我以为错了。
。。。真的找了很久找到这篇博客才搞清除。
https://www.jianshu.com/p/cf0628478a4e
首先得参照官方的解决方案 在hexo配置文件中 把post_asset_folder 属性设置为true。
改完后 通过 hexo new “xxx” 就会多生成一个与md文件同名的文件夹。
如果是之前md文件没有同名文件夹 。手动建立一个就好
然后得把图片放在那个同名的文件夹里。
贴上官方的那段代码
1 | {% asset_img example.jpg This is an example image %} |
然后把 example.jpg 替换掉自己的图片名字（后面的提示随便写）并保存
这个时候 typora 中是不展示图片的 记住 typora中是不展示图片的
得通过 hexo发布成服务后 通过网页才能展示。
ps：如果有同名的文件夹。typora 中通过如下设置插入图片的时候会自动将图片存入到同名的文件夹中
如果是后来手动建立的同名文件夹想把之前md文件里的图片搬过去。typora中鼠标右击图片可选择存入同名文件夹。然后再用官方解决办法的标签语法再写一遍就好了。
解决办法二
前两天在微信公众号里看了一篇 picgo + typoa 的文章。后来好奇的百度上搜了搜关于picgo的文章。
picgo就是一图片上传和管理的工具。图片上传到第三方平台后有个外链。picgo本身不存贮图片。只是通过第三方授权（token），管理在第三方的图片的工具。
picgo gitHub地址：https://github.com/Molunerfinn/PicGo
解决办法：
思路：hexo 主页图片不显示的主要是typora里的相对路径与hexo里的目录的处理方式不一致。如果我们引用的是外链图片那么这种相对路径的问题就不存在了。不管是博客首页还是文章里，图片的路径都是外链也就是都能正常显示。
typora提供了对picgo的支持（现在去官网下的typora都会支持）。
typora设置picgo.
我是自己下好picgo 并配置了gitee.io的仓库。然后在这里把picgo 的路径设置在这里。然后点击验证图片上传：
验证成功后会上传俩个图片。（如果图片没删除掉再次点击验证会提示验证失败和 {“success”:false}）
好了：
我们把图片黏贴进来后会存到同名的文件夹中，并且在typora能预览到图片。然后鼠标右击图片选择上传。上传成功后会自动将外链地址替换掉图片的引用地址。
picgo 配置 gitee 可参考这篇博客