Question

컨트롤러를 통해 데이터베이스에서 이미지를 검색

이 결과에

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

내가 페이지에있는 모든 사진을 볼 수 없습니다를하지만 난 있어요 방화범 같은 결과 :

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

나는 두 가지 질문이 있습니다

1. 이미지를 올바르게 표시하고 싶습니다. 여기에 뭐가 잘못 됐는지 말해 줄래? 나는 mvc가 좋지 않다.
2. 나는 두 개의 동일한 이미지를 가지고 있는데 첫 번째 이미지는 작은 이미지이고 두 번째 이미지는 커다. 사용자가 작은 이미지를 클릭하면 커다란 이미지를 보여주고 싶습니다. 그것을 구현하는 가장 좋은 방법은 무엇입니까?

그림이 클라이언트 측에로드 될 때가 이해가된다면 ViewBag에 저장해야합니다. 그것이 맞다면, 크고 작은 그림을 동기화하는 가장 좋은 방법은 무엇입니까 (클라이언트 측에서 배열이나 객체를 사용해야합니까?). 다른 방법이 있습니까? 죄송합니다. 예상보다 복잡해 보입니다.

Answer 1

작업에서 이미지 바이트를 반환합니다. 원본 바이트는 원본으로 설정할 수 없지만 Data URI scheme을 원본으로 사용할 수 있습니다. 작업에서 반환 한 형식을 base64로 인코딩 된 이미지 바이트로 올바르게 형식이 지정된 문자열로 변경해야합니다. 일부 브라우저는 데이터 크기에 제한이 있습니다. 위키 백과 페이지에서

샘플 :

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

Answer 2

는

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

로 이미지 SCR을 설정하고 변환 할 수 있다면 큰 이미지를 열려면 클릭 썸네일을 보여주는에 관한 당신은 UI Bloxk Plugin

Answer 3

을 사용할 수 있습니다 개체를 Image 개체에 추가하거나 (이미지 개체를 가져 오는 경우) 메서드의 반환 형식을 FileCont로 설정할 수 있습니다 entResult 및 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 %>" />