hexo上传网页无法显示图片的有效解决方法

本文是hexo+github快速搭建html5一文的一部分：https://alvincr.com/2021/01/hexo-with-github_pages/#i-4

个人博客：alvincr.com

 

2021.1.16内容已修改，下文方法已被淘汰。

 

 

网页无法显示图片

方法1：设置图片直接引用网络资源

方法2：使用hexo-asset-image插件

方法3：使用Markdown嵌入图像（在下面单独写）

使用插件官网教程：https://hexo.io/zh-cn/docs/asset-folders

使用hexo-asset-image

2021.1.14.22.10此问题已解决，官网给的教程个人测试无效，我想到了更简单的方法。

查看网页原代码发现图片引用的位置全是.com文件，那么直接将图片保持在.com里就，再手动将.com文件夹push到github上就行了，在typora里面设置如下：

不过测试发现也有些问题，主要是.com好像不能识别，因此写完文章时将所有的.com替换成com，然后上传com文件夹即可。

完美解决：

-------------------------------------------------------------------（测试方法）

（此方法问题较多，已弃用，建议直接使用网络url的形式）

安装第三方插件hexo-assrt-image，此插件会引用在_post目录下与文件同名的文件夹，里面保存文件使用的图片，但是我测试的时候发现，必须还要设置typora才能将图片保存到本地文件夹，安装插件方法：

将post_asset_folder: false修改为post_asset_folder: true

命令提示符命令输入npm install hexo-asset-image –save

使用此方法插入图片需要使用： to insert logo.jpg. 进行插入

问题一：

当我安装hexo-asset-image之后，虽然能生成文件夹但是出现No layout: index.html的错误，一开始出现这个错误是因为我使用主题名称没写对，这次出现这个问题的时候已经能够正常访问github pages的内容了，安装完插件后出现的此类现象：

当我查看一下我的node_modules目录后，发现我的主题被这个插件给删除了..再加回来就行了。

官网给出的解决方法（实际上不同问题不同看待，官网给出的方法完全没用）：

solution:you are both experiencing a warning that is perfectly normal and will not cause any issues for development. When using OS X there’s a nice filesystem feature provided by the OS by which file changes emit events, making “watching” files for changes the reverse, where they’re passively “listened” for (Change Detection vs an Event Emitter if you need an analogy).
This is made possible by fsevents, a package that is only available for OS X and macOS installations due to dependence on the OS’s functionality. Windows and *nix will all see this warning. I haven’t tested it, but the only non-proprietary OS that might have support would be the Darwin open source project.

问题二：

官网中给出使用此插件插入的方法，但是我个人测试无效：

正确的引用图片方式是使用下列的标签插件而不是 markdown ：{％asset_img example.jpg这是示例图片％}通过这种方式，图片将会同时出现在文章和主页以及归档页中。

直接粘贴图片测试发现：使用此插件后仍然存在问题，alvincr打开网站时还是不显示图片，我查看一下文章的源代码，发现引用的图片地址为/.com//word-image-82.png，然而根目录下根本没有.com的文件夹，甚至整个目录都没有png图片。

出现此类问题的解决方法比较简单，那就是插入图片时手动更改图片的路径，但是费时费力，还不如直接上传到图床，复制url呢。