MVC3-从数据库获取红色x而不是图片

Question

存储在数据库中时出现红色x标记而不是图片。 我相信Views文件中存在问题。 请有人看看这个并告诉我如何纠正它。 如果我的网址操作有误，请告诉我应该使用哪些操作。 提前致谢。

SubCategory2表具有以下列...

列字段>图片1：数据类型> varbinary（MAX）

列字段> ImageMimeType：数据类型> varchar（50）

Index.cshtml文件

 @foreach (var item in Model) {
    <td>
                <img src="@Url.Action("GetImage", "SubProductCategory2", 
  new { id = item.SubProductCategoryID})" alt="" height="100" width="100" /> 
           </td>

Edit.cshtml文件“ Edit”是控制器中的方法。 “ ProductCategoryL2”是控制器中的方法。 “ GetImage”是控制器中的方法。 所有这些方法都在同一个名为ProductCategoryControllerL2的控制器文件中

@using (Html.BeginForm("Edit", "ProductCategoryL2", "GetImage", 
FormMethod.Post, new { @encType = "multipart/form-data" }))
 {
  <div class="editor-field">
    <img src="@Url.Action("GetImage", "SubProductCategory2", new {    
    Model.SubProductCategoryID })" alt="" /> 
    @Html.ValidationMessage("Picture1", "*")
    <input type="file" id="fileUpload" name="Create" size="23"/>
  </div>
}

ProductCategoryL2Controller.cs文件

    [HttpPost]
    public ActionResult Edit(int id, FormCollection collection, 
    SubProductCategory2 editSubProdCat, HttpPostedFileBase image)
    {
        var r = db.SubProductCategory2.First(x => x.SubProductCategoryID 
        == id);

        if (TryUpdateModel(r))
        {
            if (image != null)
            {
              editSubProdCat.ImageMimeType = image.ContentType;
              editSubProdCat.Picture1 = new byte[image.ContentLength];
              image.InputStream.Read(editSubProdCat.Picture1, 0, 
              image.ContentLength);
            }
            db.SaveChanges();
            return RedirectToAction("/");
        }
        return View(r);

   }

  public FileContentResult GetImage(int productId)
  {
      var product = db.SubProductCategory2.First(x => 
      x.SubProductCategoryID == productId);
      return File(product.Picture1, product.ImageMimeType);
  }

补充说明
我正在使用MVC 3框架。 GetImage方法已从Steven Sanderson的Pro ASP.NET MVC 2 Framework专业版中扩展而来。 所以我不确定这是否会有问题？

Answer 1

我要调试的第一步是直接在浏览器中尝试图像的URL。 右键单击红色的X，复制该网址并将其粘贴到您的地址栏中。 如果该网址看起来正确，则应该是一个更好的错误，告诉您问题出在哪里。 如果失败，请在您的GetImage例程中放置一个断点，以确保路由正确并且正在调用您的方法。 尝试Fiddler查看正在发出的请求以及您的Web服务器在说什么。

我的猜测是您的操作有误。 该方法位于ProductCategoryL2控制器上时，似乎已链接到SubProductCategory2控制器上的GetImage操作。

另外，我不明白应该如何将您的Model.SubProductCategoryID值映射到productId参数。 尝试更改这些调用：

Url.Action("GetImage", "SubProductCategory2", 
    new { id = item.ProductCategoryID})
Url.Action("GetImage", "SubProductCategory2", new {    
    Model.SubProductCategoryID })

这些：

Url.Action("GetImage", "ProductCategoryL2", 
    new { productId = item.ProductCategoryID})
Url.Action("GetImage", "ProductCategoryL2", new {    
    productId = Model.SubProductCategoryID })

Answer 2

您的输入文件字段称为Create ：

<input type="file" id="fileUpload" name="Create" size="23"/>

而处理表单提交的控制器操作参数称为image （具有HttpPostedFileBase类型的image ）=>此参数在您的Edit控制器操作中将始终为null ，并且不会保存在数据库中。

在Html.BeginForm帮助encType中，该属性也称为enctype而不是encType 。 同样在GetImage动作内部，确保product.Picture1表示正确的图像字节数组，并且其内容类型与product.ImageMimeType匹配。

因此，例如，要进一步调试此问题，您可以尝试在返回之前将其保存到某个临时文件中，以查看其是否为有效映像。 还要确保您从数据库中获取的product实例不为空：

 // if the content type is image/png:    
File.WriteAllBytes(@"c:\foo.png", product.Picture1);

然后，确保使用图像查看器成功打开foo.png 。

Answer 3

您正在尝试将文件内容作为img的src属性的值返回。 您的浏览器将需要发出单独的图像请求。

将您的视图更改为此：

<img src="GetImage/@(Model.SubProductCategoryID)" />