插入图片失败
参考https://blog.csdn.net/u010996565/article/details/89196612 等文章的方法。
1 | npm install hexo-asset-image --save |
然后在文本中插入
1 | <img src="/images/图片名" width="50" height="50"> |
均无法正确显示图片。
hexo sever启动的终端可以看到如下提示
1 | update link as:-->/.com//xxxx.png |
打开图片的地址也是/.com//xxxx.png。
搜索到如下的网页介绍了类似的问题。
https://blog.csdn.net/xjm850552586/article/details/84101345
但是其提供的方案也无法生效。
考虑到安装 hexo-asset-image时曾经提到需要hexo4.0以上版本,而当前hexo版本是3.9,所以考虑先行升级版本
升级hexo
1 | npm cache clean -f |
2 安装node版本管理工具 n
1 | npm install -g n |
3 安装最新稳定版本的node
1 | n stable |
// 安装最新版本使用 n latest
// 安装指定版本的使用 n {version},例如 n 11.2.0
// 删除指定版本的node使用 n rm {version},例如 n rm 11.2.0
4 更新npm版本
1 | npm install npm@latest -g |
5 进入blog目录,然后执行
1 | npm outdated |
6 根据第5步输出,手工记录各个组件的最新版本号,然后逐一在package.json配置文件中修改版本号到最新版本。
7 更新模块
1 | npm install --save |
8 确认升级结果
1 | hexo -v |
升级后的问题解决
升级后图片仍然无法正常显示。
异常现象变为,路径正常时,网页上就直接显示路径文本,而不是显示图片。
而使用部分博客提到的语法,则生成的网页中直接就是空白(查看html文件,整段内容直接被忽略了)。
1 | {% asset_img slug [title] %} |
考虑到部分博客提到hexo4.0把很多插件并入了核心代码,担心插件中有冲突,于是使用下面的命令卸载掉第三方插件。
1 | npm remove hexo-asset-link --save |
然后再在文件中使用markdown的语法,就能正确显示图片了。
并且主页中的图片也能正常显示,应该是hexo4.0把image link并入核心代码后做了改进(pacakge.json中显示多了一个hexo-image-link组件),解决了markdown语法的问题。
1 | ![Alt Text](图片文件 "Title Text") |