Question

我正在尝试移植旧的HTML.Image助手，我确信每个人都曾在某个时刻使用过，而且我遇到了问题。以下编译正常：

@Html.Image("my-id", "~/Content/my-img.png", "Alt Text")

但是当我尝试在视图中使用它时，它只是写道：

<img alt="Alt Text" id="my-id" src="/content/my-img.png" />

并且不显示图像。有人可以帮忙吗？

这是我正在使用的HTML.Image帮助程序代码：

public static class ImageHelper
{
    public static string Image(this HtmlHelper helper, string id, string url, string alternateText)
    {
        return Image(helper, id, url, alternateText, null);
    }

    public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes)
    {
        // Instantiate a UrlHelper 
        var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);

        // Create tag builder
        var builder = new TagBuilder("img");

        // Create valid id
        builder.GenerateId(id);

        // Add attributes
        builder.MergeAttribute("src", urlHelper.Content(url));
        builder.MergeAttribute("alt", alternateText);
        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        // Render tag
        var ret = new MvcHtmlString(builder.ToString(TagRenderMode.SelfClosing));
        return ret.ToHtmlString();
    }

}

Answer 1

Razor视图引擎将自动HTML转义由@ - 块呈现的字符串要呈现实际的HTML，您需要在IHtmlString - 块中编写@实现。

更改您的方法以返回HtmlString而不是string。

Answer 2

    public static HtmlString Image(this HtmlHelper helper, string id, string url, string alternateText)
    {
        return Image(helper, id, url, alternateText, null);
    }

    public static HtmlString Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes)
    {
        // Instantiate a UrlHelper 
        var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);

        // Create tag builder
        var builder = new TagBuilder("img");

        // Create valid id
        builder.GenerateId(id);

        // Add attributes
        builder.MergeAttribute("src", urlHelper.Content(url));
        builder.MergeAttribute("alt", alternateText);
        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        // Render tag
        var ret = new MvcHtmlString(builder.ToString(TagRenderMode.SelfClosing));

        return ret;
    }

就像这样测试并且工作完美。我需要这样的东西来连接模型中的图像名称谢谢。

这个也适用。

 <img src="@Url.Content("~/Content/Images/Flags/" + c.CountryCode + ".jpg") " alt=""/>

Answer 3

我会尝试在调用Url的Content方法时将图片网址包装为

@Url.Content("~/Content/my-img.png")

应该在将页面刷新到浏览器时将相对URL转换为绝对值

Answer 4

我有同样的问题，并且我使用MvcHtmlString作为这两种扩展方法的返回类型，并且它可以工作

public static class ImageHelper
{
    public static MvcHtmlString Image(this HtmlHelper helper, string id, string url, string alternateText)
    {
        return Image(helper, id, url, alternateText, null);
    }

    public static MvcHtmlString Image(this HtmlHelper helper, string id, string url, string alternateText,
                               object htmlAttributes)
    {
        var builder = new TagBuilder("img");

        builder.GenerateId(id);

        builder.MergeAttribute("alt", alternateText);
        builder.MergeAttribute("src",url);

        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
    }
}

剃刀和HTML助手

4 个答案: