hexo图片插入问题

2024-05-11

字数统计: 783字 | 阅读时长≈ 3分

今天在迁移完博客之后，发现之前插入的图片都没了，这就很恼人了，于是就开始了我的bug解决之路。

一.普遍解决办法

安装hexo-image-img插件

在bolg根部目录下找到_config.yaml文件，将post_asset_folder选项设置为true，作用就是在hexo new “文章名字”的时候，在同一目录下自动生一个同名字的文件夹，用于存放当前文章所需要的图片。

在终端输入以下命令：

1	npm install hexo-asset-image --save

安装完成之后每次按照以下格式插入图片

1	{% asset_img "span>" "tittle" %}

可以看出还是不能正常显示图片，图片连接如下

1	http://localhost:4000/.com//dilireba.jpg

路径多了一个”.com”，这就是这个插件的坑爹之处,虽然网上有修改的办法，但是不想修改源代码，果断卸载，再去git找一个能用的

1 2	npm uninstall hexo-asset-image npm install git://github.com/yiyungent/hexo-asset-img.git#main

成功解决，但是目前遇到的问题是，迪丽热巴的图太大了，有什么办法将其缩小一点了？遇事不决，可问文档！

官方图片插入方法

方法

在官方文档中我们可以知道一种修改插入并图片大小的方法如下：

如图所示，图片大小已经修改成功了。

缺点

这个方法我仍然觉得不算太满意，因为导入typora文档时不仅需要修改路径还需要修改文件夹，并且无法等比例缩放图片，只能手动跳整这点我是不满意的。

HTML

在source目录下新建一个images文件夹，images里面存放需要的照片,文件结构目录如下

source
  ├─images
  │      dilireba.jpg
  │      
  └─_posts
         lystyle.md

使用html语法来插入图片，并使用zoom元素对图片缩放，如下：

1
2
3

<center>
<img src="images/dilireba.jpg" style="zoom:50%;" />
</center>

效果如下：

二.我的解决办法

安装hexo-image-link插件

如果之前安装了hexo-image-img插件需要先卸载

1	npm uninstall hexo-image-img

将根目录下的_config.yml中的post_asset_folder置为true，目的就是在hexo new ”文档名“的时候在同一目录下新建一个同名文件夹

1	post_asset_folder: true

之后只要在同名文件夹（可以手动新建）中，存放需要插入的图片，便可以直接使用，文件目录如下：

source
  ├─images
  │      dilireba.jpg
  │      
  └─_posts
      │  hello-world.md
      │  lystyle.md
      │  
      └─lystyle
              dilireba.jpg

使用方法如下：

传统插入路径简化，本地和github都能预览图片了

1	![dilireba](lystyle/dilireba.jpg)

效果图：

html方法，可以缩放图片大小，和位置

<!-- 简约版本 -->
<center>
<img src="lystyle/dilireba.jpg" style="zoom:50%;" />	
</center>


<!-- 复杂版本 -->
<center>
<img src="lystyle/dilireba.jpg" title="dilireba" alt="图片好像走丢了" style="zoom:50%"><!--alt:表示图片未加载时显示的文字-->
<div class="img-alt is-center" align="center">dilireba~</div> <!--这里写的是图注-->
</center>

效果图：

本文作者： 迪丽惹Bug
本文链接： https://lyroom.github.io/2024/05/11/hexo图片插入问题/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！