延迟加载的 Sitecore GlassMapper RenderImage

Question

请原谅我的无知。

现在，我正在使用以下代码渲染图像：

@RenderImage(Model, x => x.Image, new { @class = "card-image" }, isEditable:true)

我需要更新该代码以匹配以下延迟加载格式，同时保持图像可编辑。

<img data-src="@image" alt="" class="card-image lazy">
<noscript><img src="@image" alt="" class="card-image"></noscript>

我该如何设置这样的东西？这甚至可能吗？

Answer 1

我的建议是检查页面是否处于体验编辑器模式，并以不同于您需要在客户端呈现的代码的方式处理该代码。

有时，尝试为体验编辑器配置页面时，简单的方法是最好的方法。

示例：

@if (Sitecore.Context.PageMode.IsExperienceEditor)
{
    @RenderImage(Model, x => x.Image, new { @class = "card-image" }, isEditable:true)
}
else
{
    if(Model.Image != null)
    {
        <img data-src="@Model.Image.Src" alt="" class="card-image lazy">
        <noscript><img src="@Model.Image.Src" alt="" class="card-image"></noscript>
    }       
}

延迟加载的 Sitecore GlassMapper RenderImage

Sitecore GlassMapper RenderImage with Lazy Loading

razor

sitecore