如何在hexo博客中添加图片

本文最后更新于:2 年前

一、markdown的图片语法插入图片链接

一般来说,插入图片需要通过markdown的图片语法插入图片链接,但这就需要一个保存图片的服务器,例如阿里云的个人服务器或者其他图床网站,例如七牛等

1
![imageName](https://xxx)

二、插入本地图片

如果没有图床,可以使用本地图片的方法,hexo提供了管理本地管理图片资源的配置项

  1. 首先,我们需要修改博客配置文件_config.yml下的属性post_asset_folder:true ,当设置成功后,在创建博客时,hexo会自动建立一个与文章同名的文件夹,一般这个文件夹就是管理博文资源文件的地方,例如
1
hexo new 如何在hexo博客中添加图片内容

该文件夹就是放置图片的地方

image_1.png

  1. 将需要引用的图片放入生成的同名文件夹,使用以下语法加载
1
{% asset_img 图片名称.jpg 图片说明文字 %}

这种方法是hexo提供的加载本地图片的方法,能够较好的管理本地图片

三、hexo-asset-image插件

如果对第二中方法的语法不熟悉,那么还有第三种,就是hexo-asset-image插件,地址:https://github.com/CodeFalling/hexo-asset-image,使用方法如下。

  1. 同样需要设置博客配置文件_config.yml下的属性post_asset_folder:true

  2. 安装hexo-asset-image插件,注意该插件需要较高版本的包管理工具,如果出现安装问题,请升级包管理工具

1
npm install hexo-asset-image --save
  1. 将我们所需要的资源放入图片文件夹内,按照正常markdown语法插入图片
1
![图片替换的文字](/图片文件夹/image_1.png)

此时中括号内为需要替换的文字,小括号内为图片的路径,此方法所需的语法和我们正常markdown的语法一致

四、img标签

  1. markdown支持一般的html语法,直接使用<img>标签即可,配合hexo-asset-image插件,也可以实现本地图片的加载
1
<img src="/图片文件夹/image_1.png" width="100" hegiht="100"/>