2012. 11. 8. 17:29

* .Net 4.0 기준 *

 

 

이미 DB에 저장되어있는 이미지 파일을 'ASP.NET'에서 뿌리기 위해서는 3가지 방법이 있습니다.

1) IIS에 임시 파일을 만들어서 이미지태그(<img />)를 이용하여 출력하는 방법

2) 읽어 들인 바이너리 타입을 브라우저에 넘겨 브라우저가 이미지를 표시하도록 하는 방법

3) 'base64'데이터로 만들어서 이미지 태그를 이용하여 출력하는 방법

이 있죠.

 

이 포스팅에서는 임시파일 생성 없이 DB에 있는 'Image'나 'varbinary()'타입을 'byte'타입으로 변환해 브라우저에서 바로 표시하는 방법을 설명하겠습니다.

 

 

원리

임시파일 없이 사용할 수 있는 방법의 하나가 바이너리 정보를 브라우저한테 주고 시키는 겁니다!

브라우저는 바이너리 정보를 직접 읽는 게 가능하기 때문이죠!

 

 

방법

방법은 바이너리를 HTML에 그냥 뿌리면 됩니다.

string sIndex = (!string.IsNullOrEmpty(Request["nIndex"])) ? Request["nIndex"] : "0";

DataRow dr = m_insImage.GetItem(Convert.ToInt32( sIndex));
Response.BinaryWrite((byte[])dr["Datas"]);

 

dr["Datas"]에 들어있는 값은 DB에 'Image'와 'varbinary()'로 같은 동작을 합니다.

잘 표시됩니다.

 

 

진짜 해결 방법

하지만 위 방법은 오른쪽 클릭을 해보면 소스 보기가 안되는 것을 알 수 있습니다.

이것은 이미지파일 자체를 브라우저로 연 것과 같은 방법으로 출력하는 것이기 때문에 그렇습니다.

 

덕분에 이미지 태그도 사용할 수 없습니다 ㅡ.-;;;

말 그대로 미리보기처럼 별도의 창으로만 가능하죠.

 

이 방법을 쓰려면 아이프래임(iframe)를 이용하여 그냥 이미지만 출력하거나

새 창으로 열어서 이미지만 보여주는 식으로 처리해야 합니다.

 

진짜 해결 방법은 저장된 바이너리 정보를 'base64'로 변환해서 'img'태그에 전달하는 것입니다.

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

이런 식으로 말이죠.

 

 

마무리

반쯤 농담조로 쓴 글인데......

이미지 태그로 처리해야 하는 게 정답입니다.