Insert Pictures In Hexo Blog

After build my blog following the online course step by step , I began to try to write my own blog️ , then I find a problem when after inserting pictures in my blog , it can be viewed locally , but I can't view it correctly after deploying to Github . Here are some solutions for it .

在跟着网上教程一步步搭建好自己的博客后，开始尝试自己写博客文章，发现在Hexo博客文章中插入图片后在本地浏览正常，但是部署到GitHub上后边无法查看，在此提出一些供参考的解决方法

具体情况如下图：

遂在网上搜索解决方案，参照Ericam_的博客文章得以解决。

教程参考此篇文章https://blog.csdn.net/xjm850552586/article/details/84101345

以下为解决步骤：

1. 安装插件

安装hexo-asset-image插件，这是一个图片路径转换的插件。

在Hexo根目录下右键运行git bash，输入以下命令安装插件

$ npm install https://github.com/CodeFalling/hexo-asset-image --save

或者

$ npm install hexo-asset-image --save

若出现错误则先执行：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

后执行：

$ npm install hexo-asset-image --save

可能原因是国内网络。

2. 配置插件

打开/node_modules/hexo-asset-image/index.js 这个文件，修改其内容，因版权原因，具体的修改内容在此就不放了，请去原文章复制，将index.js的内容全部替换即可。

3. 修改 .yml文件内容

在Hexo根目录下打开_config.yml文件，修改post_asset_folder:值为ture，效果如下：

$ post_asset_folder: true

这时，当你使用

$ hexo new “filename”

新建一个 .md文件时，同时会在-post文件夹下将出现一个与新建的 .md文件同名的文件夹，把你需要插入的图片放到这个文件夹中即可。

4. 正确的图片插入命令

本人使用的是Typora的编辑器编写.md文件，当你使用使用相对路径的常规 Markdown 语法 ![](/imgName.jpg)时，虽然他能在你本地的编辑器上正确显示，但是当你部署到GitHub时会依旧不显示，正确的引用语法为

$ {% asset_img Name.jpg 文章中显示的图片名%}

jpg 后面空格可以直接写上你想要这张图片在文章中显示的名字,虽然在你本地的编辑器上不会正确显示，但是部署后会在网页文章中正确显示。

效果如下图：

Typora编辑时的显示

---

Chrome浏览器打开时的显示

---

以上步骤完成以后即可插入本地图片后，再部署到GitHub即可正常显示图片。