Image Helper 不渲染图像 (MVC3)答案

【问题标题】：Image Helper doesn't render the image (MVC3)Image Helper 不渲染图像 (MVC3)
【发布时间】：2013-05-02 06:07:59
【问题描述】：

我正在尝试创建一个图像助手来渲染图像，但我的助手不渲染图像。我能看到的都显示在下面的屏幕截图中。任何人都可以帮助找出原因吗？请帮忙。这是我的代码。

助手类

using System.Configuration;
using System.Web.Mvc;

namespace CMS.Helpers
{
    public static class ImageHelper
    {

        public static string Image(this HtmlHelper htmlHelper, string fileName, string id, string alt, string contentPath)
        {
            var imgDirectory = ConfigurationManager.AppSettings["imageDirectory"];
            var imagePath = string.Format("{0}{1}", imgDirectory, contentPath);
            var file = string.Format("{0}{1}", imagePath, fileName);
            var img = new TagBuilder("img");
            img.MergeAttribute("src", file);
            img.MergeAttribute("alt", alt);
            return img.ToString(TagRenderMode.SelfClosing);
        }
    }
}

查看

@Html.Image("TestImage.jpg", "testImg", "TestImg", "/Content/Uploads/MySiteImages")

Web.Config

<add key="imageDirectory" value="http://localhost:49191"/>

截图

在浏览器上输入图片 url "http://localhost:49191/Content/Uploads/MySiteImages/TestImage.jpg" 时，我看到图片存在。

【问题讨论】：

标签： asp.net-mvc-3 razor html-helper

【解决方案1】：

您的问题是 Razor 会自动对每个使用 @ 符号写入响应的 string 进行 HTML 编码。

您可以使用Html.Raw方法关闭自动编码：

@Html.Raw(Html.Image("TestImage.jpg", "testImg", "TestImg", 
                     "/Content/Uploads/MySiteImages"))

或者你可以从你的助手那里返回MvcHtmlString。这是 ASP.NET MVC 中更惯用的方式，在这种情况下，razor 不会对您的 HTML 进行编码，因此您无需记住使用 Html.Raw：

public static MvcHtmlString Image(this HtmlHelper htmlHelper, 
     string fileName, string id, string alt, string contentPath)
{
     var imgDirectory = ConfigurationManager.AppSettings["imageDirectory"];
     var imagePath = string.Format("{0}{1}", imgDirectory, contentPath);
     var file = string.Format("{0}{1}", imagePath, fileName);
     var img = new TagBuilder("img");
     img.MergeAttribute("src", file);
     img.MergeAttribute("alt", alt);
     return MvcHtmlString.Create(img.ToString(TagRenderMode.SelfClosing));
}

【讨论】：