​ 我们使用Typora等markdown编辑器编写博客时，总是想要图文并茂地生成内容，这就免不了进行对文章配图。如果我们把图片直接复制到文章中，实际生成文章html时图片是不存在的。因为我们引用的的是本地的图片路径，在html中是无法进行展示的。下面几种方式能够解决这个问题，让我们在生成对应的html时正确加载图片。

方案一：使用 Hexo 官方“资源文件夹”（推荐）

这是最规范的方法，通过配置让每篇博文都有一个专属的资源文件夹。

  1. 启用资源文件夹
    打开 Hexo 根目录下的 _config.yml 文件，找到并修改：

    yaml

    1
    post_asset_folder: true

  2. 组织你的图片
    此后，当你使用 hexo new 文章标题 命令创建新文章时，Hexo 会自动在 source/_posts 文件夹下创建一个与文章同名的文件夹（例如 文章标题.md 对应 文章标题/ 文件夹）。把你文章需要用到的所有图片都放入这个文件夹中。

  3. 在 Markdown 中引用图片
    在文章 Markdown 文件中，使用 标签插件 语法引用图片，而不是标准的 ![]() 语法：

    markdown

    1
    2
    <!-- 语法：{% asset_img 图片文件名.后缀 图片说明 %} -->
    {% asset_img huang01.jpg 方案一示例图片 %}

    Hexo 在生成静态文件时，会自动处理这张图片的路径，并复制到正确的位置。这个方案中写入的图片在markdown文件中并不能直观地显示出图片来，这是需要特别注意的。

方案二：传统相对路径

如果你希望保持标准的 Markdown 图片语法 ![]()，需要在博客目录的source目录下新建img目录，然后将图片放入到这个目录中。这个方案也不能编辑文档时预览图片。

  1. 在 Markdown 中引用图片
    在文章里，使用相对路径的 Markdown 标准语法即可：

    1
    ![方案二示例图片](/img/top_img1.jpg)

    方案二示例图片

方案三：终极保障 —— 使用图床或 CDN

对于稳定性要求极高或图片很多的博客，推荐使用图床（如 SM.MS、阿里云 OSS、腾讯云 COS）或 CDN。

  • 方法：将图片上传到图床，获得一个公开的 URL 链接。

  • 在 Markdown 中使用：

    markdown

    1
    ![图片说明](https://你的图床地址/example.jpg)

    使用阿里云、腾讯云等云服务的oss作为图床是非常方便的。流量费用也相对便宜。而且能够做到速度快，不会出现方案二中的错误和方案一中的不直观问题。

  • 优点：

    • 绝对路径：永远不会出现路径错误。
    • 减轻服务器负担：图片由专业服务托管，加载速度通常更快。
    • 便于迁移和备份：文章和图片分离，管理更清晰。