type
status
date
slug
summary
tags
category
icon
password
Hexo 插入图片有两种方式，第一种是网络引用，第二种是本地插入，本文主要介绍本地插入图片方式。另外由于 Hexo 是静态博客框架，所插入的图片默认会按照本身大小自动铺满，如果要设置图片大小需要另外写 css 来进行控制。转载请说明出处。
前言
Hexo 插入图片有 网络图片插入 和 本地图片插入 两种方式。
网络图片插入的做法是先把图片上传到 七牛云 等云服务商提供的图床，然后通过
 的方式，把 img-url 的地址替换成图片在图床的 url 地址即可。使用网络图片的好处是七牛云的cdn加速效果会大大提高图片的打开速度，缺点是多图片博客的编辑过程会比较繁琐，图片管理比较麻烦。本地图片插入把图片和博客保存在一起，方便图片管理，但是图片的网络打开速度会很慢。下面重点介绍本地图片插入。
常规本地图片插入
1、安装插件
安装插件 hexo-asset-image，在 hexo 安装目录下运行
安装完成后需要重启一下服务器。
注意 hexo-asset-image 仓库已经停止维护。新版使用 hexo-renderer-marked 3.1.0 版本以上的插件。
具体参考 资源文件夹
2、修改配置文件
编辑 Hexo安装目录下的_config.yml 文件，找到
post_asset_folder，把值改成 true。通过将 config.yml 文件中的post_asset_folder选项设为true来打开资源文件管理功能。当资源文件管理功能打开后，Hexo 将会在你每一次通过hexo new [layout] <title>命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。
3、使用插入图片
使用
hexo new post "xxxx" 来新建博客时，会发现在 /source/_posts 文件夹下会有一个同名的 xxxx 文件夹，对于已存在的博客可以新建一个同名文件夹。您可以把与该文章相关的所有资源都放到那个文件夹，如此一来，您便可以更方便的使用资源。先把图片复制到同名文件夹中，然后在文章中使用
例如把 example.jpeg 复制到同名文件夹，然后在文章中使用
效果图如下：
设置图片大小
图片默认会显示原本的图片大小并居中显示，如果需要对图片大小进行设置，需要另外写 css 样式进行控制。注意：该方法可能会覆盖原来的一些图片样式。
效果图如下：
Hexo与Typora的结合
上述是从文章资源文件夹中引用图片，前提是先将图片放入到文章资源文件夹，如果图片数量众多的话，一张一张的放很影响效率。Typora对于插入图片的支持做得非常好，设置 偏好设置—图片，设置复制到指定路径，值为
./${filename}，然后勾选下面的按钮。
使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径。
但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的
文件名/。不慌，也很简单。在 Typora 编辑器中，使用<C-f>快捷键，将所有的文件名/替换为空即可删除。参考
- Author:mcbilla
- URL:http://mcbilla.com/article/e908a50b-ec4d-47cb-9042-d1912a6e1a0d
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!