hexo图片引用

hexo图片引用测试

hexo图片引用是比较复杂的。引用图床（url）格式的图片还好，文件路径写相应的url就行，但是引用本地文件时择总是出问题。
解决方法：下载插件hexo-renderer-marked。
在git bash中输入如下代码进行下载

$ npm install hexo-renderer-marked --save

进行下载
依据github说明配置config.yml文件即可

这里推荐以如下的的html格式进行配置：

<img src="relative path" alt="title" width="50%">

这样既能在本地markdown编辑器的预览页中看到，又可以在网站中显示，还能调整标题与大小。

注意，relative path指的是相对路径，例如：
文章的md文件路径D:/hexo/blog/source/_posts
图片路径D:/hexo/blog/source/_posts/image_example/img.png
那么相对路径为/image_example/img.png

下面进行测试：

1.html格式进行引用

第一种方式（相对路径）：

<img src="/2023-05-11-hexo图片引用/LaTeX_logo.svg" alt="LaTeX logo1" width="70">

效果如下（markdown中可以显示，且网页中能显示，极力推荐）：

width的值决定图片宽度。1000=100%，70=7%，数字与百分比可以互相转换。

第二种方式（hexo-renderer-marked使文件路径默认解析至资源文件夹）：

<img src="LaTeX_logo.svg" alt="LaTeX logo2" width="70">

请注意：图片的长宽比始终保持不变。
效果如下（markdown中不能显示，但网页中能显示）：

第三种方式：
使用markdown语法（由hexo-renderer-marked插件支持）

![LaTeX logo3](LaTeX_logo.svg)

效果如下（markdown中不能显示，但网页中能显示，且调整不了大小）：

2.url格式引用

<img src="https://katex.org/img/katex-logo-black.svg" alt="KaTeX logo" width="70"/>

效果如下（markdown中可以显示，且网页中能显示）：