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即可正常显示图片。