标签：npm Insert 插件 Hexo hexo image Blog asset 图片
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 语法 时，虽然他能在你本地的编辑器上正确显示，但是当你部署到GitHub时会依旧不显示，正确的引用语法为
$ {% asset_img Name.jpg 文章中显示的图片名%}
jpg 后面空格可以直接写上你想要这张图片在文章中显示的名字,虽然在你本地的编辑器上不会正确显示，但是部署后会在网页文章中正确显示。
效果如下图：
Typora编辑时的显示
Chrome浏览器打开时的显示
以上步骤完成以后即可插入本地图片后，再部署到GitHub即可正常显示图片。
标签：npm,Insert,插件,Hexo,hexo,image,Blog,asset,图片 来源： https://www.cnblogs.com/shmebluk/p/13099426.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。