如何解决如何实现 asp-append-version="true" 到 background-image 属性?
我正在尝试对我的图像实施 HTMLTagHelper asp-append-version="true"
。
问题在于 DOM 分布,我没有将该属性分配给 <img>
标记,而是分配给包含具有 <div>
属性的图像的 background-url
。
此外,div 是在加载所有 DOM 之前生成的,我不知道是否会有不同的方法。
很明显,将 div
更改为 img
标记,但我不想要它,因为我的设计必须保持不变。
迄今为止,我的 javascript 一直是这样的:
cardHTML += '<div asp-append-version="true" class="card littleCard" style="background-image: url(/Content/Img/Especialistas/LittleCard/' + especialista.idEspecialista + '.jpg' + ')' + '" >';
cardHTML += '</div>';
asp-append-version="true"
不适用于 div
标签。
关于如何找到处理此问题的方法的任何想法?
谢谢
解决方法
您可以创建自定义 TagHelper
以定位具有内联样式属性的所有元素。我试过的以下示例看起来工作正常,但如果您想要更标准的东西(类似于 ImageTagHelper
,...),您可以尝试查看基类 UrlResolutionTagHelper。我不太确定为什么它需要更复杂,基本上你需要在实际处理它之前解析 URL。我已经尝试过一个简单的 IFileVersionProvider
并且它也适用于相对路径(当然解析的路径应该在当前服务器的 Web 根目录下)。
以下简单示例适用于 HtmlString
的属性值(这几乎是通常的情况,对于这种复杂的情况,某些自定义呈现可能会注入不属于 IHtmlContent
的 HtmlString
,您可以参考 UrlResolutionTagHelper 的源代码,甚至可以复制几乎完全相同的相关代码):
//target only elements having an inline style attribute
[HtmlTargetElement(Attributes = "style")]
public class InlineStyleBackgroundElementTagHelper : TagHelper
{
readonly IFileVersionProvider _fileVersionProvider;
const string BACKGROUND_URL_PATTERN = "(background(?:-image)?\\s*:[^;]*url)(\\([^)]+\\))";
public InlineStyleBackgroundElementTagHelper(IFileVersionProvider fileVersionProvider)
{
_fileVersionProvider = fileVersionProvider;
}
//bind the asp-append-version property
[HtmlAttributeName("asp-append-version")]
public bool AppendsVersion { get; set; }
//inject ViewContext from the current request
[HtmlAttributeNotBound]
[ViewContext]
public ViewContext ViewContext { get; set; }
public override void Process(TagHelperContext context,TagHelperOutput output)
{
if (AppendsVersion)
{
if (output.Attributes.TryGetAttribute("style",out var styleAttr))
{
//the value here should be an HtmlString,so this basically
//gets the raw plain string of the style attribute's value
var inlineStyle = styleAttr.Value.ToString();
var basePath = ViewContext.HttpContext.Request.PathBase;
inlineStyle = Regex.Replace(inlineStyle,BACKGROUND_URL_PATTERN,m =>
{
//extract the background url contained in the inline style
var backgroundUrl = m.Groups[2].Value.Trim('(',')',' ');
//append the version
var versionedUrl = _fileVersionProvider.AddFileVersionToPath(basePath,backgroundUrl);
//format back the inline style with the versioned url
return $"{m.Groups[1]}({versionedUrl})";
},RegexOptions.Compiled | RegexOptions.IgnoreCase);
output.Attributes.SetAttribute("style",inlineStyle);
}
}
}
}
用法:就像您如何在其他内置标签上使用 asp-append-version
一样有帮助。 (就像在你的例子中一样)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。