hexo使用Hexo-asset-image图片无法正常显示的一些解决方案

1. 问题描述

在进行个人博客的搭建工作时，

2. 解决方案

2.1 修改hexo-asset-image的代码（未测试）

详细步骤参考下面文章：

【Hexo】hexo-asset-image在hexo6.3.0下的使用以及与abbrlink插件的修改-CSDN博客

2.2 换用hexo-renderer-marked-it（测试有效）

根据hexo官方中的描述如下

如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

文章资源文件夹

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1 2	_config.yml post_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代，社区创建了很多插件来解决这个问题。但是，随着Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

1
2
3

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法 ![](example.jpg) ，它将不会出现在首页上。（但是它会在文章中按你期待的方式工作）

正确的引用图片方式是使用下列的标签插件而不是 markdown ：

1	{% asset_img example.jpg This is an example image %}

通过这种方式，图片将会同时出现在文章和主页以及归档页中。

使用 Markdown 嵌入图片

hexo-renderer-marked 3.1.0 引入了一个新的选项，其允许你无需使用 asset_img 标签插件就可以在 markdown 中嵌入图片（进入链接后往下翻找进入hexo-renderer-marked-it）

如需启用：

_config.yml
post_asset_folder: true
images:
    lazyload: false
    prepend_root: true
    post_asset: true

启用后，资源图片将会被自动解析为其对应文章的路径。
例如： image.jpg 位置为 /2020/01/02/foo/image.jpg ，这表示它是 /2020/01/02/foo/ 文章的一张资源图片， ![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg" > 。

1
2
3

注意事项：
如果使用![](image.jpg)这种引用格式的话在markdown编辑器中是无法看到图片的，只能在浏览器中看到
可以使用![](your_essay_name/image.jpg)引用格式这样本地和浏览器中均可看到

!!!特别注意你的文章名称不能是中文，这样会导致你的图片在浏览器中无法显示。博主亲测 :joy:

2.3 使用图床

如果使用图床的话，这样post_asset_folder就可以不用启用了也不用安装图片转换插件了。博主目前正在使用的就是图床，网上也有人说由于图床有时可能不稳定会导致浏览器无法访问照片，管他呢先用着再说。

博主使用的图床工具是PicX，感觉挺好用的不用安装直接在线就可上传图片。网上也有很多别的图床工具例如PicGo等等，配置教程就不一一赘述了，大家可自行百度。

PicX配置教程如下：

2.3.1 GitHub OAuth 授权登录

不推荐，原因是还需要安装picX，麻烦！！！！！！！！！！！！！

2.3.2 填写GitHub Token登录

创建一个带有 repo 权限的 GitHub Token点击 https://github.com/settings/tokens/new 快速新建 GitHub Token

点击 Generate token 按钮，生成 GitHub Token并保存。
图床配置

填写 GitHub Token 之后，点击 一键配置 PicX 会自动创建 GitHub 仓库，完成仓库、分支和目录之间的配置，并跳转到图片上传页面。

进入页面后可以选择图床配置新建目录来设置新的图片保存路径，也可以直接上传图片。
图床设置中除了图片压缩选择图中的选项外，其余保持默认。