Abrufen von Bildern aus der Datenbank durch einen jQuery AJAX-Aufruf

Question

Controller, um ein Bild zu erhalten:

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;
  }
}

und eine Aussicht:

<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>

im Ergebnis sehe ich kein Bild auf der Seite, aber ich habe das gleiche Ergebnis in FireBug:

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

Ich habe zwei Fragen:

1. Ich möchte das Bild korrekt anzeigen. Können Sie mir sagen, was hier falsch ist? Ich bin nicht gut in mvc.
2. Ich habe zwei gleiche Bilder, das erste ist klein und das zweite groß. Ich möchte das große Bild anzeigen, wenn der Benutzer auf das kleine Bild klickt. Was ist der beste Weg, es zu implementieren?

Wenn ich richtig verstehe, wenn Bild auf der Client-Seite geladen wird, muss ich es in ViewBag speichern. Wenn es richtig ist, was ist der beste Weg, kleine und große Bilder zu synchronisieren (sollte ich Array oder Objekt auf der Client-Seite verwenden)? Gibt es noch andere Möglichkeiten? Sorry, es sieht komplexer aus als ich erwartet habe.

Answer 1

Wenn Sie Ihr Objekt in ein Image-Objekt umwandeln können (oder wenn Sie ein Image-Objekt erhalten) können Sie den Rückgabetyp Ihrer Methode auf FileContentResult setzen und einen MemoryStream zurückgeben. Dann setzen Sie Ihre src auf den Pfad zu Ihrer Controller-Methode.

Der Controller wird in etwa folgendes bewirken:

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);
    }
}

Ansicht:

<img src="/MyController/GetImage?id=<%: myImageId %>" />

Answer 2

Sie geben Bildbytes von Ihrer Aktion zurück. Sie können keine rohen Bytes als Quelle angeben, aber Sie können Daten-URI-Schema als Quelle. Sie müssen das Format ändern, das Sie von Ihrer Aktion zurückgegeben haben, um eine richtig formatierte Zeichenkette mit base64-kodierten Bytes des Bildes zu erhalten. Beachten Sie, dass einige Browser Beschränkungen für die Größe der Daten haben.

Beispiel aus der Wikipedia-Seite:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

Answer 3

Setzen Sie Ihr Bild scr als

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

und bezüglich der Anzeige der Miniaturansicht, die angeklickt werden kann, um ein großes Bild zu öffnen, können Sie Folgendes verwenden UI Bloxk-Plugin