Hexo图片不显示解决
发表于|更新于|技术博客
|总字数:431|阅读时长:1分钟|浏览量:
安装插件及页面配置
安装插件
npm install hexo-renderer-marked |
修改hexo根目录配置文件_config.yml
#更改hexo设置 |
模拟创建新页面
hexo n testPage |
在文件testPage.md中引入图片命令
vscode编辑器中正常预览现实图片
 |
hexo发布网页
 |
模拟创建页面-预览效果截图
Vscode中预览图片展示(图片使用的相对路径)
Hexo部署页面打包预览图片不展示
Hexo部署页面打包预览图片展示
日常编辑、发布工作流
备注:在上述插件已经安装且配置文件已如上述所示修改完成后
- 通过命令
hexo n newPage
创建新的页面 - 复制已创建的
newPage
文件夹及newPage.md
文件到vscode工作目录下 - 在vscode中正常书写信息、引用相关图片素材资源放置
newPage
文件夹中 - 在vscode中完成书写后,复制当前步骤[2]的文件夹及文件到hexo的工作目录下覆盖初始创建的文件夹及目录
- 全局替换hexo工作目录下
newPage.md
文件中图片引入代码./newPage/
,使其图片目录由
为变为
- 执行
hexo g
命令进行打包,运行hexo s
命令预览页面 - 复制hexo工作目录下
public
下所有资源到相应仓库下进行提交发布即可
补充vscode下编辑md文件的相关插件
最新补充
hexo-renderer-markdown-it
比hexo-renderer-marked
更强大!
新增插件:hexo-renderer-markdown-it (需要卸载:hexo-renderer-marked)
此时图片显示不出来,需要额外安装插件:hexo-renderer-markdown-it
文章作者: MUMU
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 blog.wo0ow.com!