ayerr图片显示修复示例

原主题ayer已在2022年停止更新导致后续图片不能正常显示，作者设计了ayerr 主题：一款基于ayer主题修复了图片显示问题后的衍生主题。

因原主题ayer已停止维护导致博客图片无法显示，于是我对原项目进行fork后修改并重新部署。若有其他问题欢迎联系。

本文详细介绍了 ayerr 主题中可用的图片显示方法，包括三种使用方式和详细的代码范例。

省流：

{% asset_img 图片文件名 "图片描述" %}

![图片描述](图片文件名)

<img src="图片文件名" alt="图片描述">

第一种方式：asset_img标签

使用 {% asset_img %} 标签

语法格式

{% asset_img 图片文件名 "图片描述" %}

代码范例

{% asset_img demo.png "这是使用 asset_img 标签的图片" %}

显示效果

特点

• 专为文章资源文件夹设计
• 自动处理图片路径
• 生成带有 article-img 类的图片标签
• 支持带空格的描述文字
• 无需手动拼接图片路径

第二种方式：使用传统 Markdown 语法

语法格式

![图片描述](图片文件名)

代码范例

![这是使用传统 Markdown 语法的图片](demo.png)

显示效果

特点

• 标准 Markdown 语法，兼容性好
• 简洁易记
• 自动处理文章资源文件夹中的图片
• 支持描述文字

3. 两种方法的区别

方法	语法	特点	适用场景
asset_img 标签	{% asset_img 图片名 "描述" %}	专为文章资源设计，自动处理路径	推荐使用，兼容性更好
传统 Markdown		标准语法，简洁易记	习惯传统语法的用户

4. 注意事项

5. 启用文章资源文件夹：确保在博客根目录的 _config.yml 中启用：

   post_asset_folder: true

6. 图片存放位置：将图片放在与文章同名的资源文件夹中，例如：

source/_posts/
├── test-asset-fix.md
└── test-asset-fix/
    └── demo.png

3. 图片尺寸：建议使用适当尺寸的图片，避免过大影响加载速度

4. 图片格式：支持常见的图片格式，如 PNG、JPG、GIF 等

5. 修复说明

本次修复解决了 ayerr 主题中的图片显示问题，主要包括：

• 实现了 {% asset_img %} 标签支持
• 修复了传统 Markdown 图片显示问题
• 修复了图片 URL 生成逻辑
• 优化了图片显示样式
• 确保两种图片使用方式都能正常工作

现在，您可以在 ayerr 主题中自由使用两种图片显示方法，轻松添加图片到您的博客文章中。

第三种方式：原生的 HTML 图片标签

<img src="图片文件名" alt="图片介绍">