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上后边无法查看,在此提出一些供参考的解决方法
具体情况如下图:
Insert Pictures In Hexo Blog

遂在网上搜索解决方案,参照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编辑时的显示
Insert Pictures In Hexo Blog


Chrome浏览器打开时的显示

Insert Pictures In Hexo Blog


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

上一篇:Unity_AssetBundle笔记_(二)转(俗称AB包_个人笔记欢迎指正)


下一篇:Google Chrome 浏览器禁用缓存