如何在AEM组件中使用Sightly设置动态响应式背景图

• 样式拼接逻辑错误：原代码已经把--backgroundImage等CSS变量定义封装到backgroundImageStyle变量中，却在div的style属性中再次添加--backgroundImage:前缀，导致最终生成的样式格式错误，浏览器无法识别
• 多余分号问题：空值拼接时会生成多余的分号，会打断后续样式的解析，直接导致布局错乱
• 上下文配置不合理：使用context='unsafe'不仅有XSS风险，也会导致特殊字符转义异常，造成背景图URL解析失败
• 响应式逻辑缺失：仅定义了两个屏幕尺寸的背景图CSS变量，没有配套的媒体查询切换逻辑，无法实现响应式切换

HTL 组件模板代码 #

<sly data-sly-test.hasBackgroundImg="${model.backgroundImg}"
     data-sly-test.hasBackgroundImgSmall="${model.backgroundImgSmall}"
     data-sly-test.hasBackgroundColor="${model.backgroundColor}"
     data-sly-set.backgroundImage="${hasBackgroundImg ? '--backgroundImage: url(\'' + model.backgroundImg + '\');' : ''}"
     data-sly-set.backgroundImageSmall="${hasBackgroundImgSmall ? '--backgroundImageSmall: url(\'' + model.backgroundImgSmall + '\');' : ''}"
     data-sly-set.backgroundColor="${hasBackgroundColor ? 'background-color: ' + model.backgroundColor + ';' : ''}"
     data-sly-set.backgroundLayout="${properties.backgroundLayout ? properties.backgroundLayout + ';' : ''}"
     <!-- 拼接时自动过滤空值，避免多余分号 -->
     data-sly-set.backgroundImageStyle="${[backgroundImage, backgroundImageSmall, backgroundColor, backgroundLayout @ join='']}">
</sly>
<div class="superteaser-grid ${model.gridStyle}" style="${backgroundImageStyle @ context='styleString'}">
    <!-- 组件其他内容 -->
</div>

配套响应式CSS代码 #

.superteaser-grid {
    /* 默认使用移动端小图 */
    background-image: var(--backgroundImageSmall);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 768px以上大屏幕切换为大图 */
@media screen and (min-width: 768px) {
    .superteaser-grid {
        background-image: var(--backgroundImage);
    }
}

• 确保Sling Model中的backgroundImg和backgroundImgSmall返回的是已经处理好的完整可访问路径，可通过com.day.cq.commons.DamUtil获取资产的发布路径
• 如果需要支持WebP等多格式背景图，可扩展CSS变量定义，结合image-set()实现
• context='styleString'是HTL专门用于样式属性的安全上下文，会自动过滤非法样式内容，避免XSS风险

内容的提问来源于stack exchange，提问作者Neeti Kumari