解决Hexo部署时文章和页面插入图片不显示的问题
孜然鸡丁

在Hexo部署时,经常会发现文章和页面内插入的本地图片无法显示,通常是使用hexo g生成网页源代码时解析路径出现问题,导致源代码内对文件引用的路径不对。
建议使用官方推荐的资源文件夹模式管理本地图片文件(其他文件也可以),配合使用<img scr="url">和相对路径的方式插入图片

开启资源文件夹模式

_config.yml文件中如下配置(若没有marked项自行添加):

1
2
3
4
post_asset_folder: true
marked:
prependRoot: true
postAsset: true

开启后每次在使用hexo new post <titel>创建文章时,会同步在_posts文件夹下创建一个文章同名文件夹用来管理文章内的图片等文件,在文章内插入的图片都应保存在此文件夹下进行管理.

在文章内进行引用时,可使用以下三种方式:

  1. ![image](img.jpg)
  2. ![image](.\titel\img.jpg)
  3. <img scr=".\titel\img.jpg">
    其中第3种方式不仅在文章Post和页面Post都有效,而且可以设置图片属性,例如<img scr=".\titel\img,jpg" width="100%" height=128px>来限制高度,因此优先推荐使用第3中方式。

说明:

  • 第1种方式仅在开启了资源文件夹模式,且在文章Post中才有效。因为开启了资源文件夹模式,会在解析时会自动在文件路径前加上文章的资源文件夹路径,因此可以正确访问文件,但前提是将图片等文件放在了文章对应的资源文件夹内进行管理。而在页面Page中插入图片时,这种方式就会失效,因为创建页面时,不会自动创建资源文件夹,即使手动创建同名资源文件夹,且将图片等文件放入进行管理,也无法自动解析文件路径。因此不推荐使用这种方式。
  • 第2种方式是使用原始的MarkDown嵌入图片语法,并且使用相对路径引用,例如![image](.\文章名\MoonStone.jpg),这里的文章名应该跟生成的资源文件夹名称一样,如果调整了文章名生成模板,请注意。这样在解析后图片路径依旧为.\文章名\MoonStone.jpg,因此可以正确访问到资源文件夹下的图片。这种方式对页面Page插入图片同样有效,但无法调整图片属性,因此也不推荐。
  • 第3中方式是直接使用图像标签<img scr=".\titel\img.jpg">结合相对路径来插入图片,这种方式不仅可以任意设置图片属性,而且在页面Page插入时同样有效,因此不论在写文章还是页面时都有一致语法。而且如果你没有使用资源文件夹进行图片等文件管理,也只需要将相对路径改为图片相对路径即可。因此推荐使用第3中方式。
 评论
评论插件加载失败
正在加载评论插件
由 Hexo 驱动 & 主题 Keep
总字数 2.5k 访客数 访问量