2

控制器获取图像：

public class PicturesSmallController : Controller
{
  public ActionResult Details(int id)
  {
    PictureSmallManager m = new PictureSmallManager();
    PictureSmall p = m.Load(id);
    ImageFormat imageFormat = ImageHelper.ConvertToImageFormat(p.ContentType);
    return p.Trunk != null ? File(p.Trunk, p.ContentType) : null;
  }
}

和一个观点：

<script type="text/javascript">
  $(document).ready(function () {
  var picsSmall = $('#picturesSmall');
  picsSmall.toggle();
  var url = '@Url.Action("Details", "PicsSmall")';
  var ai = {
    id: 69
  };
  $.ajax({
    type: "POST",
    url: url,
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(ai),
    success: function (returndata) {
        picsSmall.append($('<img/>', {
          src: returndata,
          alt: 'some text'
        }));
      select.show('slow');
    }
  }
 );
});
</script>
<div id="picturesSmall"></div>
<div id="picturesBig"></div>

结果我在页面上看不到任何图片，但我在 FireBug 中得到了相同的结果：

<div id="picsSmall" style="display: block;">
<img src="�����JFIF��`�`���� ...... �d��:1�g�" alt="some text">
</div>

我有两个问题：

  1. 我想正确显示图像。你能告诉我这里有什么问题吗？我不擅长mvc。
  2. 我有两个相同的图像，第一个很小，第二个很大。当用户点击小图片时，我想显示大图片。实施它的最佳方法是什么？

如果我在图片加载到客户端时理解正确，我必须将其保存在 ViewBag 中。如果正确，同步小图片和大图片的最佳方法是什么（我应该在客户端使用数组还是对象）？还有其他方法吗？抱歉，它看起来比我预期的要复杂。

4

3 回答 3

3

如果您可以将对象转换为 Image 对象（或者如果您正在获取图像对象），则可以将方法的返回类型设置为 FileContentResult 并返回 MemoryStream。然后将 src 设置为控制器方法的路径。

控制器会产生以下效果：

public class MyController : Controller
{
    public FileContentResult GetImage(int id)
    {
        Image myimage = Bitmap.FromFile(Server.MapPath("~/Images/myimage.jpg"));
        var format = System.Drawing.Imaging.ImageFormat.Jpeg;
        string mimeType = "jpeg";

        MemoryStream ms = new MemoryStream();
        myimage.Save(ms, format);

        return File(ms.ToArray(), "images/" + mimeType);
    }
}

看法：

<img src="/MyController/GetImage?id=<%: myImageId %>" />
于 2012-06-26T21:55:06.303 回答
2

您正在从您的操作中返回图像字节。您不能将原始字节设置为源，但可以使用数据 URI 方案作为源。您需要更改从您的操作返回的格式，以使用图像的 base64 编码字节正确格式化字符串。请注意，某些浏览器对数据大小有限制。

来自维基百科页面的示例：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
于 2012-06-26T20:23:01.203 回答
2

将您的图像 scr 设置为

src = "data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsY......

关于显示可点击的缩略图以打开大图像，您可以使用UI Bloxk 插件

于 2012-06-26T20:25:58.483 回答