2

我正在使用以下代码动态设置响应式背景图像，但它在我的组件中不起作用。图像未显示，我的 UI 也受到干扰。

请为我的组件建议正确的代码以动态添加背景图像。

<sly data-sly-set.backgroundImage="--backgroundImage:url('${model.backgroundImg}');"
         data-sly-set.backgroundImageSmall="--backgroundImageSmall:url('${model.backgroundImgSmall}');"
         data-sly-set.backgroundColor="background-color: ${model.backgroundColor}"
         data-sly-set.backgroundImageStyle="${model.backgroundImg ? backgroundImage : '' };${model.backgroundImgSmall ? backgroundImageSmall : '' };${properties.backgroundLayout};${model.backgroundColor ? backgroundColor : '' }"></sly>
         <div class="superteaser-grid ${model.gridStyle}" style="--backgroundImage:${backgroundImageStyle @ context='unsafe'}; ">
4

1 回答 1

0

您粘贴的代码没有多大意义：

<sly data-sly-set.backgroundImage="--backgroundImage:url('${model.backgroundImg}');"
         data-sly-set.backgroundImageSmall="--backgroundImageSmall:url('${model.backgroundImgSmall}');"
         data-sly-set.backgroundColor="background-color: ${model.backgroundColor}"
         data-sly-set.backgroundImageStyle="${model.backgroundImg ? backgroundImage : '' };${model.backgroundImgSmall ? backgroundImageSmall : '' };${properties.backgroundLayout};${model.backgroundColor ? backgroundColor : '' }"></sly>
         <div class="superteaser-grid ${model.gridStyle}" style="--backgroundImage:${backgroundImageStyle @ context='unsafe'}; ">

as--backGroundImage不是合法的 CSS 属性。然而，它确实看起来像一个 BEM 修改器，所以也许你想这样使用它：

<sly data-sly-set.backgroundModifier="${model.backgroundImg ? '--backgroundImage' : (model.backgroundImgSmall ? '-backgroundImageSmall' : '')}"
     data-sly-set.backgroundStyle="url(${model.backgroundImg || model.backgroundImgSmall}) ${properties.backgroundLayout} ${model.backgroundColor ? backgroundColor : '' }">
    <div class="superteaser-grid${backgroundModifier}" style="background:${backgroundStyle @ context='unsafe'}"></div>
</sly>

当然，您可以改进它以有条件地添加url()和间隔，backgroundStyle但我想使示例尽可能小。

于 2021-07-26T07:56:52.680 回答