教程（四） 解决博客文章中图片上传失败问题

Markdown 里的图片一般以链接或相对地址存在文件外面，Hexo 生成静态文件时不会自动把这些图片一起生成或保存，于是博客上的图片就加载失败了。下面是几种解决办法。

方案一：放进 images 文件夹，用绝对路径引用

Hexo 里有专门放图片的 images 文件夹。图片不多时，可以统一放在 source/images 里，用 Markdown 语法引用：

![](/images/image.jpg)

要小心的是，这个文件夹里的图片在文章和主页里都能被访问到。

Hexo 官方文档现在也把这条写成了图片不多时的首选：非文章专属的文件放 source/images，用 /images/... 引用。

方案二：放进文章自己的目录，用相对路径引用

图片也可以放在文章自己的目录里，这个目录由站点配置文件 _config.yml 生成。

1. 把 _config.yml 里的配置项 post_asset_folder: true 设为 true。
2. 执行命令：

$ hexo new post_name

3. source/_posts 里会生成文章 post_name.md 和同名文件夹 post_name，把图片放进 post_name。
4. 文章里就可以用相对路径引用图片：

![](image.jpg)

图中左边是 Markdown 文章，右边是同名的图片文件夹。

post_asset_folder 默认是关的。打开之后，每次 hexo new 都会自动建一个和文章同名的资源文件夹。只有文章才有这个待遇，hexo new page 建的独立页面不会生成。

方案三：标签插件语法，文章和首页都能显示

相对路径的图片在文章详情页显示没问题，但在首页预览里显示不出来。因为同一段相对路径，在文章页和首页、存档页里指向的位置不同。官方文档的说法是，用相对路径引用资源可能会导致它们在存档页或者主页上显示不正确。如果希望图片在文章和首页里都能显示，用标签插件语法：

# 本地图片资源，不限制图片尺寸
{% asset_img image.jpg This is an image %}
# 网络图片资源，限制图片显示尺寸
{% img http://www.viemu.com/vi-vim-cheat-sheet.gif 200 400 vi-vim-cheat-sheet %}

标签插件比 Markdown 语法能写的东西多。按官方签名：

• {% asset_img foo.jpg 500 400 %} 会输出宽 500、高 400 的图片；
• 文件名或标题里有空格要加引号，例如 {% asset_img "spaced asset.jpg" "spaced title" %}；
• 同族还有 {% asset_path slug %} 只取路径、{% asset_link slug [title] %} 生成链接；
• {% img %} 的完整写法里，标题和 alt 要用引号包起来：{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}。上面网络图片那行标题是裸写的，照官方格式补上引号更稳。

标签插件不能包在 Markdown 语法里面写。如果写法全对还是不生效，先看 Hexo 版本：7.1.0 出过一次参数解析的回归，参数里的双引号被转义成 "，参数就被拆散了，7.1.1 修好。

方案四：装 hexo-renderer-marked 插件

插件 hexo-renderer-marked 解决了这个问题。

1. 安装插件：

npm install hexo-renderer-marked

2. 在 _config.yml 中把配置改成：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

3. 之后就能用 ![](image.jpg) 愉快地插图了。插图时插件会自动创建 post_name 文件夹，并自动使用这个文件夹的相对路径。

用这个方案前先查两件事

第一，插件很可能已经装了。现在 hexo init 用的模板 hexo-starter 默认依赖里就有 hexo-renderer-marked，先看看 package.json 再决定要不要装。

第二，看插件版本。这两个开关是 hexo-renderer-marked 3.1.0 加的，而且 postAsset 必须配合 prependRoot 才生效，只开一个没用。在 7.x 早期这套组合还坏过一阵，图片报 CAN NOT GET /image.jpg，维护者在 v7.3.0 修复。所以我的建议是：插件在 7.3.0 以上就放心用方案四，低于这个版本就先升级，或者退回方案三的标签插件。

注意：Markdown 里看不到不代表网页上没有

用相对路径时，把图片放进 post_name 文件夹、直接拿图片名当路径，图片在 Markdown 文本里是显示不出来的，但在静态网页里可以正常显示。