在Hexo博客中插入图片

  • 547 字
  • 0 条评论

在Hexo博客中插入图片

在Hexo博客中插入图片非常简单,可以选择以下两种方式:

  1. 直接在将所有的图片放在source/images/目录下,然后在Markdown文件中通过相对路径引用图片。
1
2
3

![图片描述](/images/your-image.png)

  1. 使用Hexo的post_asset_folder功能,将图片与文章放在同一目录下。首先在Hexo配置文件_config.yml中启用post_asset_folder选项:
1
2
3

post_asset_folder: true

然后在创建新文章时,Hexo会自动为该文章创建一个同名的文件夹,将图片放在该文件夹中。引用图片时,可以使用相对路径:

1
2
3

![图片描述](your-image.png)

这样,图片就会正确显示在你的Hexo博客文章中。

注意事项

部分项目会出现图片无法加载的情况,检查后会发现尝试从根目录加载图片,这时需要在Hexo配置文件中添加以下配置,确保图片路径正确解析。

在_config.yml中添加:

1
2
3
4
5
6
7

marked:

prependRoot: true

postAsset: true

这样可以确保Hexo在渲染Markdown时正确处理图片路径,避免加载失败的问题。

常见问题

Hexo博客怎么在文章里插入图片?

可以有两种方式:一是把图片放到 source/images/ 目录下,在 Markdown 中用 ![图片描述](/images/your-image.png) 引用;二是启用 post_asset_folder,把图片放在文章同名文件夹里,用相对路径 ![图片描述](your-image.png) 引用。

Hexo post_asset_folder 怎么配置和使用?

在 Hexo 配置文件 _config.yml 中把 post_asset_folder 设为 true。之后新建文章时 Hexo 会自动创建同名文件夹,把图片放进去,在 Markdown 中用相对路径 ![图片描述](your-image.png) 引用即可。

Hexo 图片显示不出来或路径错误怎么解决?

部分项目会尝试从根目录加载图片导致失败,可以在 _config.yml 中添加 marked 配置,设置 prependRoot: true 和 postAsset: true,这样 Hexo 渲染 Markdown 时会正确处理图片路径,避免加载失败。

分享
分享提示信息