AnQiCMS模板中如何正确显示文章内容里的图片，并支持图片懒加载功能？

在内容运营中，精美的图片能够显著提升文章的吸引力和阅读体验。然而，图片文件往往较大，如果处理不当，可能会拖慢页面加载速度，影响用户体验甚至搜索引擎排名。AnQiCMS 深知这一点，提供了灵活的方式来在模板中正确显示文章内容里的图片，并支持图片懒加载功能，以平衡美观与性能。

核心：显示文章内容中的图片

在 AnQiCMS 的模板中，获取文章主体内容，我们主要依赖 {% archiveDetail with name="Content" %} 这个强大的标签。当您在后台的文章编辑器中插入图片时，无论是上传的本地图片还是引用外部图片，它们都会作为 HTML 结构的一部分保存在文章内容（Content 字段）中。

这个标签会提取文章编辑器中包含所有富文本格式的内容，包括图片、文字样式等。为了确保这些 HTML 代码能被浏览器正确解析并显示，我们通常会配合 |safe 过滤器一起使用。|safe 过滤器的作用是告诉模板引擎，这段内容是安全的 HTML 代码，不需要进行转义处理，可以直接输出到页面上。

例如，如果您想在文章详情页显示文章内容，模板代码可能是这样的：

<div class="article-content">
    {% archiveDetail articleContent with name="Content" %}
    {{ articleContent|safe }}
</div>

通过这种方式，文章内容中的所有图片、文字格式都会被完整且正确地呈现在您的网站页面上。

提升加载效率：图片懒加载

为了优化用户体验，加快页面加载速度，图片懒加载（Lazy Loading）功能变得尤为重要。它能让图片在进入用户可视区域时才开始加载，从而减少初始页面加载时的资源消耗，尤其对于图片较多的文章，效果显著。

AnQiCMS 在 archiveDetail 标签中已经内置了对文章内容图片进行懒加载处理的支持。您只需要在调用 Content 字段时，额外添加一个 lazy 参数即可，例如 lazy="data-src"。

这个参数的作用是，当 AnQiCMS 渲染文章内容中的 <img> 标签时，会将图片真实的 src 属性值替换或移动到 data-src（或其他您指定的属性名，如 data-original）上，并将 src 属性留空或设置为占位符图片。

然而，仅仅设置这个参数是不够的。浏览器并不会自动识别 data-src 并加载图片。您还需要引入一个前端 JavaScript 懒加载库（例如 lazysizes、vanilla-lazyload 等），由这个库来检测 data-src 属性的图片，并在图片进入可视区域时，动态地将 data-src 的值重新赋值给 src，从而实现延迟加载。

实践：图片显示与懒加载的模板代码

将两者结合起来，您的文章内容显示代码会变得更加高效：

<div class="article-content">
    {% archiveDetail articleContent with name="Content" lazy="data-src" %}
    {{ articleContent|safe }}
</div>

<script>
// 在这里引入并初始化您的前端懒加载 JavaScript 库
// 例如，如果您使用 lazysizes 库，通常只需要在 HTML 页面中引入其 JS 文件即可，
// 库会自动检测带有 data-src 属性的图片并进行懒加载。
// <script src="path/to/lazysizes.min.js" async=""></script>
</script>

请注意，lazy="data-src" 中的 data-src 必须与您所使用的前端懒加载库所识别的属性名称相匹配。大部分主流库都支持 data-src，但如果您的库使用其他属性，请相应修改。

更多图片优化建议

除了懒加载，AnQiCMS 后台的「内容设置」中提供了一系列图片处理选项，可以进一步优化图片性能：

• 是否启动 Webp 图片格式： 开启后，系统会自动将上传的 JPG、PNG 等格式图片转换为体积更小的 WebP 格式，在不损失视觉质量的前提下，大幅提升图片加载速度。
• 是否自动压缩大图： 如果您上传的图片尺寸过大，系统可以自动将其压缩到指定宽度，减少图片文件大小。
• 是否下载远程图片： 开启此选项可以确保文章中引用的外部图片也被下载到您的服务器上，便于统一管理和优化，同时避免因外部图床失效导致图片无法显示。

通过结合 AnQiCMS 模板标签的 lazy 参数和这些后端优化功能，您的网站将能够以更快的速度、更流畅的体验呈现在访问者面前。

常见问题 (FAQ)

Q1：我已经在模板中设置了 lazy="data-src"，但图片懒加载似乎没有生效，这是为什么？

A1：仅仅在 AnQiCMS 模板中添加 lazy="data-src" 参数，只是让系统将图片的真实地址从 src 属性移到了 data-src 属性。要真正实现懒加载效果，您还需要在前端引入一个相应的 JavaScript 懒加载库（例如 lazysizes.js 或 vanilla-lazyload.js），并确保该库已正确初始化。这个 JS 库会负责检测页面中的 data-src 图片，并在它们进入可视区域时动态加载。请检查您的前端是否引入了此类库以及其配置是否正确。

Q2：文章内容中的图片是否会自动生成缩略图？

A2：AnQiCMS 默认并不会直接对文章内容中的图片自动生成用于懒加载的缩略图版本。lazy="data-src" 参数是用于将原图的 src 属性替换，从而延迟加载原图。如果您希望使用质量更低或尺寸更小的缩略图作为懒加载的占位符，这通常需要您在前端的懒加载库中进行配置，或者通过自定义开发来实现。

Q3：除了文章内容图片，文章的封面图或缩略图如何显示并支持懒加载？

A3：文章的封面图（Logo）和缩略图（Thumb）通常是通过 {% archiveDetail with name="Logo" %} 或 {% archiveDetail with name="Thumb" %} 等标签单独调用的。这些图片本身并非嵌入在文章内容的富文本中。要对它们实现懒加载，您需要手动将 src 属性替换为 data-src，例如 <img data-src="{% archiveDetail with name="Thumb" %}" class="lazyload" alt="文章标题" />，然后同样依赖前端懒加载 JS 库来识别和加载。