如何在AEM 6.1中创建可实现图片加载展示的图片组件

嘿，我来一步步带你搞定AEM 6.1里的图片组件开发，从基础搭建到渲染优化都给你说清楚：

1. 先在CRXDE Lite中创建组件基础结构 #

打开CRXDE Lite（访问/crx/de），找到你的项目目录（比如/apps/my-project/components），右键新建Component：

• 组件名称：image
• 标题：自定义图片组件
• 资源类型：my-project/components/image
• 所属组：My Project（根据你的项目组调整）
• 勾选允许在页面上使用（Allowed in Templates）

创建完成后，组件的基础路径就是/apps/my-project/components/image。

2. 配置图片选择对话框（Dialog） #

在组件目录下新建dialog.xml，用来让编辑人员上传图片、设置alt文本。以下是核心配置：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"
    title="图片组件配置"
    xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection">
        <image
            jcr:primaryType="cq:Widget"
            allowUpload="{Boolean}true"
            autoStart="{Boolean}true"
            fieldLabel="选择图片"
            mimeTypes="[image/jpeg,image/png,image/gif]"
            name="./fileReference"
            xtype="fileupload"/>
        <altText
            jcr:primaryType="cq:Widget"
            fieldLabel="图片替代文本（必填，用于无障碍访问）"
            name="./alt"
            xtype="textfield"
            required="{Boolean}true"/>
    </items>
</jcr:root>

这个对话框包含两个核心字段：

• fileReference：存储图片在DAM中的路径（或者页面本地的图片路径）
• alt：存储图片的替代文本，提升页面无障碍性

3. 编写HTL渲染脚本（推荐用HTL，AEM 6.1已支持） #

在组件目录下新建image.html，这是组件的渲染逻辑，负责加载并展示图片：

<sly data-sly-use.image="com.myproject.components.ImageModel" data-sly-test="${image.hasImage}">
    <div class="custom-image-component">
        <img src="${image.imageUrl}" 
             alt="${image.altText}" 
             loading="lazy" <!-- 懒加载优化，提升页面加载速度 -->
             class="img-responsive"/>
    </div>
</sly>
<sly data-sly-test="${!image.hasImage}">
    <div class="image-placeholder">
        <p>请上传图片</p>
    </div>
</sly>

对应的Java模型类（ImageModel.java）用来处理图片路径和逻辑判断，放在你的项目Java源码目录（比如src/main/java/com/myproject/components/）：

package com.myproject.components;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import javax.annotation.PostConstruct;
import java.util.Optional;

@Model(adaptables = Resource.class)
public class ImageModel {

    @SlingObject
    private Resource resource;

    @ValueMapValue
    private String fileReference;

    @ValueMapValue
    private String alt;

    private String imageUrl;
    private boolean hasImage;

    @PostConstruct
    protected void init() {
        this.hasImage = Optional.ofNullable(fileReference).isPresent();
        if (hasImage) {
            // 处理DAM图片路径，确保能正确访问
            this.imageUrl = resource.getResourceResolver().map(fileReference);
        }
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public String getAltText() {
        return alt != null ? alt : "";
    }

    public boolean isHasImage() {
        return hasImage;
    }
}

如果不想用Java模型，也可以直接在HTL中用${properties.fileReference}获取路径，但用模型能更好地封装逻辑，提升可维护性。

4. 测试组件 #

1. 打开AEM页面编辑器，找到你的自定义图片组件，拖到页面上
2. 点击组件的配置按钮，上传一张DAM中的图片，填写alt文本
3. 预览页面，检查图片是否正常加载，alt文本是否正确渲染

5. 进阶优化（可选） #

• 多尺寸图片适配：使用AEM的DamProcessor生成不同尺寸的图片，在HTL中通过srcset实现响应式加载
• 图片懒加载：上面的代码已经加了loading="lazy"，也可以用JS实现更复杂的懒加载逻辑
• 图片压缩：配置DAM的图片处理预设，确保上传的图片自动压缩，提升加载速度

内容的提问来源于stack exchange，提问作者Rohit Esaragundi