hexo图片问题

发表于 更新于 分类于
hexo博客如何添加图片

hexo博客在添加图片时遇到了问题，下面说三个解决方案：强烈推荐方案三

1
图片多用方案一，图片少用方案二，（最新方案）方案三

解决方案一：

参考链接

本方法通过{%%}插入本地图片，首先要修改博客配置文件_config.yml,把配置文件里的post_asset_folder设置为true，这时用hexo new "文章标题"创建文章时会自动创建一个同名的文件夹，用于存放资源文件。

使用{%%}方法必须将图片放在新建文件时生成的同名文件夹目录下，然后使用以下命令格式即可：

1
{% asset_img 图片文件名 图片加载失败的描述 %}

  • 缺点

    新建文章时会新建同名目录用于存放图片，图片不多的话就看着很烦，更重要的是图片无法在Typora中展示，只能在博客中看，这让我很不爽。

解决方法二：

参考链接

本方法通过<img src="/img/xxx.jpg"/>方式插入图片，详细步骤在链接中，原文章中有一个点说的不太准确，就是在Typora中设置图片根目录时选择的目录是hexo目录下的source目录，不是source/img目录。其余跟原文章一样。

1
<img src="/img/xxx.jpg" style="zoom:80%" /> //80%是缩放比例

  • 缺点

    图片多的话会比较麻烦，但是在Typora和博客中图片均会显示。

解决方案三（最新方案，强烈推荐）：

[参考链接](资源文件夹 | Hexo)

  • 优点

    在Typora中可以直接用![]()标签显示同名文件夹中的图片，还可成功布置到博客上。

这个方法参考了一部分的官方文档。前两个方法都不好，第一个写法{% %}有点反人类，而且无法在Typora显示，第二个方法适用于图片较少的情况，我现在用到的图片比较多，现在也不太行了。

我的方法跟第一个方案类似，首先要修改博客配置文件_config.yml,把配置文件里的post_asset_folder设置为true，并在配置文件里添加以下的marked部分，官方文档说hexo-renderer-marked 3.1.0 引入了一个新的选项，其允许你无需使用 {% %}就可以在 markdown 中嵌入图片，而是使用![]()标签即可，我就是参考的这个，hexo-renderer-marked 3.1.0插件无需下载，在新版的hexo中已经集成了，如果不确定有没有可以使用npm list hexo-renderer-marked命令查看。

1
2
3
4
5
6
_config.yml
post_asset_folder: true
---------------------------------添加以下内容----------------
marked:
  prependRoot: true
  postAsset: true

设置完后用hexo new "文章标题"创建文章时会自动创建一个同名的文件夹，用于存放资源文件，一定要用这个方法创建文章。使用![]()方法必须将图片放在新建文件时生成的同名文件夹目录下，然后在Typora中使用以下命令格式即可添加图片：

1
![图片描述](image.png) // 这里的图片路径直接填图片名即可，不需要在添加其它目录

此时会发现一个bug，无法在Typora中显示图片，但是可以在博客中显示，解决方法是在Typora中设置图片根目录时选择放置图片的目录，详细步骤是在Typora中选择：

1
格式（O） -> 图像 -> 设置图片根目录 -> 选择文章同名文件夹（即放置图片的文件夹）

设置完后就可以在Typora中显示图片了。

  • 细节

    经过多次测试，一定要把post_asset_folder设置为true，再使用hexo new "文章标题"创建文章才可以，只用在这种情况下在自动创建的同名文件夹中的图片才管用，才没有问题，自己手动创建文件夹放置图片会导致在Typora中不显示图片，设置为false的话会导致图片仅在Typora中显示而不在博客中显示。

  • 缺点

    没有找到一个好的方法删除文章的同时删除对应的文件夹。