Question

请原谅我对此的无知。

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

Vue.component('PageTable', PageTable)
Vue.component('PageTitle', PageTitle)
Vue.component('PageRow', PageRow)

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

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

我将如何设置这样的内容？这有可能吗？

Answer 1

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

有时候，尝试为Experience Editor配置页面的简单方法是最好的方法。

示例：

@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

1 个答案: