视图是否可以在不首先将其保存到文件的情况下显示WebImage？

Question

我不确定我WebImage是否正确使用该课程.

我有一个控制器从数据库中提取照片和一些相关信息(评论,上传日期,文件名).我想返回包含此信息的部分视图,并显示图像以及额外信息.

所以我从字节数组创建了一个新的WebImage,但是如何显示呢？

根据这篇文章,它应该很简单

1. 您需要使用Razor语法并创建一个包含图像的变量:
   @{ var myImage = WebImage("/Content/myImage.jpg") // Work with the image… }

2. 然后,为了在页面中加载图像,您必须在HTML <img/>标记内显示包含图像的变量:
   <img src="@myImage"/>

除了不起作用,它只是输出<img src="System.Web.Helpers.WebImage">和调用.Write没有帮助.

有没有办法做到这一点,还是我需要将我的动作分成两个不同的动作,一个是返回照片信息,另一个是返回照片本身？

Answer 1

你可以随时写出来!

您只是不使用WebImage.Save(),而是使用WebImage.GetBytes().

在此示例中,您已将图像作为字节数组保存到数据库中.简化它只是处理jpegs.

    /// <summary>
    /// Reference this in HTML as <img src="/Photo/WatermarkedImage/{ID}" />
    /// Simplistic example supporting only jpeg images.
    /// </summary>
    /// <param name="ID">Photo ID</param>
    public ActionResult WatermarkedImage(Guid ID)
    {
        // Attempt to fetch the photo record from the database using Entity Framework 4.2.
        var photo = db.Photos.Find(ID);

        if (photo != null) // Found the indicated photo record.
        {
            // Create WebImage from photo data.
            // Should have 'using System.Web.Helpers' but just to make it clear...
            var wi = new System.Web.Helpers.WebImage(photo.Data); 

            // Apply the watermark.
            wi.AddImageWatermark(Server.MapPath("~/Content/Images/Watermark.png"), 
                                 opacity: 75, 
                                 horizontalAlign: "Center", 
                                 verticalAlign: "Bottom");

            // Extract byte array.
            var image = wi.GetBytes("image/jpeg");

            // Return byte array as jpeg.
            return File(image, "image/jpeg");
        }
        else // Did not find a record with passed ID.
        {
            return null; // 'Missing image' icon will display on browser.
        }
    }

Answer 2

无论如何都不能在一个剃刀视图中执行它...您需要创建一个单独的动作来渲染图像.

页面上的img标签将根据img src中提供的url对服务器进行SEPERATE http调用.