在 hexo 中使用图片的几种方法

在 hexo 中使用图片的几种方法

以下内容是在同时安装 hexo-abbrlink 和 hexo-image-link 的前提下给出的（临时）解决方案。

简明版：

  • 默认大小的图片，直接拖入 typora，会自动更改链接；
  • 要更改大小的，修改后，替换链接中的
1
<img src="./picture-in-hexo/test.jpg" title="图片标题" alt="没有加载时显示的内容" style="zoom:25%;" />

为

1
<img src="./永久链接/test.jpg" title="图片标题" alt="没有加载时显示的内容" style="zoom:25%;" />

详细版：

方法一（首选方法）：

安装 hexo-image-link 插件，该插件可以将 格式的图片链接在生成 html 文件之前自动转换为 。

参考 https://zhuanlan.zhihu.com/p/280758822，如果这个解决了问题，就忽略下面两个链接

https://blog.csdn.net/m0_43401436/article/details/107191688

https://blog.csdn.net/xjm850552586/article/details/84101345

  1. 直接复制粘贴图片

  2. 点击菜单栏 - 格式 - 图像 - 插入本地图片

  3. 直接拖放图片

  4. 如果想要改变图片大小，直接拖放图片，但是之后需要替换全文图片链接中的

1
<img src="./永久链接/test.jpg" title="图片标题" alt="没有加载时显示的内容" style="zoom:25%;" />

为

1
2
# 可以在网页显示，但是typora没有
<img src="./永久链接/test.jpg" title="图片标题" alt="没有加载时显示的内容" style="zoom:25%;" />

这样替换是因为 hexo-image-link 只能处理前面那种比较简单的图片链接格式，对于这种要改变大小的就无能为力了，所以需要我们手动修改（实际上也可以自己写一个插件来实现这种情况的自动替换）。

例如（可以对图片检查元素来查看 html 代码）：

方法二：

利用网络上的图片。具体方法是：先将一张图片上传至网络（或者直接利用网络上已有的图片）得到其链接，在 markdown 中使用语句 图片题目 插入该图片，然后生成、部署、刷新网页。例如：

1
![test](http://home.ustc.edu.cn/~sdyzzy/posts/picture-in-hexo/test.jpg)

方法三

直接利用 hexo 的标签插件在文章中插入指定大小的图片。适用于不想安装插件的情况，但是这样在 typora 之中看不到图片。

在 markdown 中使用语句

1
![test](http://home.ustc.edu.cn/~sdyzzy/posts/picture-in-hexo/test.jpg)

方法四

利用 markdown 自带的 HTML 语言。将图片存入 \hexo\source_posts 文件夹下与文章同名的文件夹之中，输入如下代码，然后生成、部署、刷新网页。（这种方法也需要修改链接）

1
2
3
4
<p>
<img src="./图片链接" alt="图片标题">
<div class="img-alt is-center">图片标题</div>
</p>

文章作者: SDYZZY
文章链接: http://home.ustc.edu.cn/~sdyzzy/posts/36e27ee1.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 SDYZZY’s Universe！