Hexo 图片引用问题

发表于

使用 Hexo 搭建的博客网站，第一篇文章决定就是吐槽这个架子了，引用个图片折腾了半天…

问题描述

将构建的文件直接部署到子路由时，会报错提示找不到文档引用的图片资源。

![](/image.jpg) // 在文档中以该方式直接引用图片，会提示找不到图片

问题分析

通过查看文档说明或者直接查看构建出的 public 文件夹可以知道，hexo 在构建时会将所有 Markdown 和 HTML 外的资源都打到 public 的根目录中。

例如一张图片原来的地址是 /source/image.jpg，那么构建后的地址就是 /public/image.jpg

假设部署的 gitee page 地址是 https://sample.gitee.io/sample/ ，部署文件路径选择 /public ，那么其实图片所在的地址为 https://sample.gitee.io/sample/image.jpg ，而构建后 img src 的引用路径为 https://sample.gitee.io/image.jpg ，自然就找不到图片资源了。

解决方法

官方文档其实有说明，但是这个官方文档真的一言难尽，中英夹杂，叙述也很混乱。推荐查看英文原文，对自己好一点。

前提条件

  • hexo-renderer-marked: >= 3.1.0
  • Hexo 4: >= 2.0
  • Hexo 3: >= 0.2
  • Hexo 2: 0.1.x

开始解决

  • 安装 hexo-renderer-marked
$ npm install hexo-renderer-marked --save
  • 在 _config.yml 中正确添加以下配置（配置中额 sample 按照自己的实际情况修改）：
url: https://sapmle.gitee.io/sample
root: /sample/

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

按照上面配置完后，当你执行 hexo new <filename> 生成新的文档时，他会同时生成一个和 <filename> 同名的文件夹，将所有的静态资源放到该文件夹内，然后在 md 中直接相对 <filename> 引用即可。

例如新建一个文档 stupidHexo.md，执行

hexo new stupidHexo

此时在 source 中可以看到生成了 stupidHexo.md 和 stupidHexo 文件夹。将一张图片放进 stupidHexo 的子目录 images 中，即 /source/stupidHexo/images/image.jpg ，在 stupidHexo.md 中以该方式引用

![](images/image.jpg)

然后在 cmd 中执行以下命令（如果浏览器已经打开了本地服务请先关闭，不然没有效果）：

hexo clean & hexo g & hexo s

然后打开本地服务的地址，可以看到图片已经正常加载。

原理

官方文档最后也有说明。简单来说就是在构建时，将 img src 设置成了明确的相对根目录的地址，所以就不会出现资源引用的问题了。

其他

最后，插入一张图片表达此刻的欣 tong 喜 ku 之情

js是世界上最好的语言