解决在博客中插入图片失败的方法

在第一次更新文章的时候就发现，如果直接把在 public / img / 中的图片复制过来（拥有一长串地址，根目录是磁盘），会变成下面这样。

一开始以为是图片没有成功上传，导致图片失效，但是在多次部署之后，从 GitHub 上的 img 中可以得到，图片上传是成功了的，如下图所示。

既然在 GitHub 仓库中能够找到上传的图片，为什么在网站中无法识别呢？

多番百度寻找方法，给出的答案是以缺少 hexo-asset-image / img 插件（前者目前在笔者的电脑上无法正常安装，从 bash 中用相关安装语句，会一直转圈圈，不知是否为网络问题）导致无法生效。

关于hexo-asset-image等操作可以看下列链接，给出的步骤非常详细：

[解决：hexo+github本地和线上图片不显示问题_butterfly主题博客图片无法显示-CSDN博客](https://blog.csdn.net/z952957407/article/details/111642548#:~:text=配置 Typora 偏好设置，如下图更改，此操作将图片文件保存路径%3A .%2F%24 {filename} 即保存到与 当前正在编辑的文件名相同的同级文件夹下。,修改_config.yml中的post_asset_folder，false 改为 true，这样修改后，每次 ‘hexo new page’ 生成新文章，都会在文章文件同级目录创建一个与文章文件名同名的文件夹，我们就在这里存放此文章的图片。)

Hexo中插入图片hexo asset image_asset-image hexo-CSDN博客

但是没有插件就没法成功插入图片吗？

不是的。

上述方法的核心并不在于插件的存在与否，而在于利用插件以及把配置文件 _config.yml 文件中的 post_asset_folder 从 false 改为 true，如下图所示

然后再在 _posts 下加入与博客文章同名的文件夹，在里面加入这个文章需要的图片，这才是核心所在。

但是光创建一个单独的文件夹，不注意引入图片的格式依然会导致图片无法显示。

从文件夹直接复制过来的格式为： [post_asset_folder](D:*****\Blog\source\_posts**************.png)

这样上传以后，在网页的源代码中，路径还是 (D:*\Blog\source\_posts****.png) 但是上传 GitHub 后，仓库里面没有D盘，自然也就找不到你的照片。所以在路径选择的时候需要把前面绝对路径更改为相对路径，命名规则：

1
![Picture](你创建的同名文件夹/你的图片)

并且这里还有两个点需要注意

  1. Picture命名最好不要单独以一个数字命名，会导致图片路径转化的时候，给图片赋予默认的 width ，比如设置一个 1.jpg ，那么在最终上传后，文章页面的图片的 HTML 中会加入一行 class width = “文件名” ，导致图片非常小，以至于我当时以为是我图片还没加载。
  2. （）小括号里面的斜杠不能写为反斜杠 \ ，只能写 / ，用反斜杠依然会 Image Not Find。

总结

总结一下，不用下载插件也可以正常插入图片，在修改 _config.yml 后，创建 md 文章（可以手动，也可以hexo new “post”）后继续创建一个 同名 文件夹（可以利用百度的方法让其自动生成，具体可看：在hexo博客中插入图片的方法hexo插入图片-CSDN博客）用以存放所需图片。

在写文章插入图片的时候，注意不要直接复制绝对路径，要修改成相对路径。