使用语言切换器时Sitecore版本化图片加载异常问题排查

问题描述 #

我运行Sitecore 10.3，有一个包含图片字段的数据模板，基于该模板创建了项，站点支持EN和th-TH两种语言。配置两个语言版本的图片并发布后，切换站点语言时，页面其他内容正常变更，但图片不会同步更新，只有硬刷新后才会更新。观察到媒体URL中未附加语言查询字符串，请问该问题的原因是什么，有哪些解决办法？

渲染Logo图片（.svg）的代码如下：

@Html.Sitecore().BeginField(Model.LogoUrlField, Model.InnerItem, new { haschildren = true, @class = "logo", @title = Model.LogoTitle })
@Html.Sitecore().Field(Model.LogoImageField, Model.InnerItem)
@Html.Sitecore().EndField()

问题原因 #

• 媒体URL缺失语言标识：Sitecore默认生成媒体URL时，若未明确指定语言参数，不会自动追加sc_lang查询字符串。浏览器会缓存旧语言版本的图片，切换语言后仍加载缓存内容，导致图片不更新。
• 媒体项语言版本未正确配置/发布：虽然为模板项配置了多语言图片，但对应的媒体项可能未启用语言版本，或发布时未同步发布对应语言的媒体版本。
• 字段渲染逻辑限制：使用@Html.Sitecore().Field()渲染SVG图片时，默认URL生成逻辑未结合当前上下文语言生成带语言参数的URL，SVG作为非二进制媒体，Sitecore的处理逻辑与普通图片存在差异。

解决办法 #

1. 渲染字段时手动追加语言参数 #

修改图片字段的渲染代码，通过mediaUrlParams参数强制添加当前语言的查询字符串：

@Html.Sitecore().BeginField(Model.LogoUrlField, Model.InnerItem, new { haschildren = true, @class = "logo", @title = Model.LogoTitle })
@Html.Sitecore().Field(Model.LogoImageField, Model.InnerItem, new { mediaUrlParams = new { sc_lang = Sitecore.Context.Language.Name } })
@Html.Sitecore().EndField()

2. 配置Sitecore自动在媒体URL中包含语言参数 #

通过配置补丁修改Sitecore设置，让媒体URL自动追加语言参数：

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <settings>
      <setting name="Media.AlwaysIncludeLanguageInUrl" value="true" />
    </settings>
  </sitecore>
</configuration>

启用该设置后，所有媒体URL都会自动带上当前语言的sc_lang参数。

3. 确保媒体项的多语言版本已正确发布 #

• 检查对应媒体项是否存在EN和th-TH的语言版本，且每个版本都上传了对应的图片。
• 发布时，确认选择包含媒体项的发布范围，并同步发布所有语言版本。

4. 直接通过MediaManager生成带语言参数的媒体URL #

绕过默认字段渲染逻辑，使用MediaManager手动生成包含语言参数的URL，确保每个语言版本的图片URL唯一：

@{
    var imageField = (ImageField)Model.InnerItem.Fields[Model.LogoImageField];
    if (imageField != null && imageField.MediaItem != null)
    {
        var mediaUrl = Sitecore.Resources.Media.MediaManager.GetMediaUrl(
            imageField.MediaItem, 
            new Sitecore.Resources.Media.MediaUrlOptions { Language = Sitecore.Context.Language }
        );
        <a href="@Html.Sitecore().Field(Model.LogoUrlField, Model.InnerItem)" class="logo" title="@Model.LogoTitle">
            <img src="@mediaUrl" />
        </a>
    }
}

这种方式完全控制URL生成逻辑，避免缓存冲突。

内容的提问来源于stack exchange，提问作者Nagaraju Chatta