解决Hexo部署时文章和页面插入图片不显示的问题
在Hexo部署时,经常会发现文章和页面内插入的本地图片无法显示,通常是使用hexo g
生成网页源代码时解析路径出现问题,导致源代码内对文件引用的路径不对。
建议使用官方推荐的资源文件夹模式管理本地图片文件(其他文件也可以),配合使用<img scr="url">
和相对路径的方式插入图片
开启资源文件夹模式
在_config.yml
文件中如下配置(若没有marked项自行添加):
1 | post_asset_folder: true |
开启后每次在使用hexo new post <titel>
创建文章时,会同步在_posts
文件夹下创建一个文章同名文件夹用来管理文章内的图片等文件,在文章内插入的图片都应保存在此文件夹下进行管理.
在文章内进行引用时,可使用以下三种方式:
![image](img.jpg)
![image](.\titel\img.jpg)
<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中方式。
评论
评论插件加载失败
正在加载评论插件