[java] IE에서 이미지 표시되지 않는 경우 해결 방법

html 웹 페이지 개발 시 이미지를 표시하기 위해 보통 아래와 같이 img 태그를 사용합니다.

<img src="./test.jpg"/>

 

그런데, 실무에서 웹 서비스를 개발하다보면 아래와 같이 특정 URL을 호출해서 이미지를 보여주는 경우가 정말 많습니다.

<img src="/getImage/1"/>

 

이렇게 URL을 호출해서 이미지를 보여줄 경우, Chrome은 아무 문제가 없는데 Internet Explorer에서만 이미지가 보이지 않는 경우가 있습니다.

 

결론부터 말씀드리면 header에 Content-Type을 명시하지 않았기 때문인데요.

Internet Explorer의 경우 Content-Type을 명시하지 않으면 이미지가 아니라 (악의적일 수 있는) XML 또는 HTML이라고 판단되어 이미지를 표시하지 않습니다.

 

따라서 아래와 같이 Content-Type을 추가해야 합니다.(ex. contentType(MediaType.IMAGE_PNG))

import org.apache.commons.io.FilenameUtils;
import org.apache.commons.io.IOUtils;
import org.springframework.core.io.InputStreamResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.io.FileInputStream;

// 컨트롤러 생략

public ResponseEntity<byte[]> getImage(HttpServletRequest req) {
  ResponseEntity<byte[]> responseEntity = null;
  FileInputStream is = null;
  String fileName = "c:/111.png";

  try {
    is = new FileInputStream(fileName);
    InputStreamResource resource = new InputStreamResource(is);
    String ext = FilenameUtils.getExtension(fileName);

    if (ext.equals("jpg")) {
      responseEntity = ResponseEntity.ok()
        .contentType(MediaType.IMAGE_JPEG)
        .header(HttpHeaders.CONTENT_DISPOSITION, 
          "inline; filename=\"".concat(fileName).concat("\""))
        .body(IOUtils.toByteArray(resource.getInputStream()));
    } else if (ext.equals("png")) {
      responseEntity = ResponseEntity.ok()
        .contentType(MediaType.IMAGE_PNG)
        .header(HttpHeaders.CONTENT_DISPOSITION,
          "inline; filename=\"".concat(fileName).concat("\""))
        .body(IOUtils.toByteArray(resource.getInputStream()));
    }
  } catch (Exception e) {
    e.printStackTrace();
  } finally {
    if (is != null) {
      try {
        is.close();
      } catch (Exception e) {}
    }
  }

  return responseEntity;
}

 

 

[참고사이트]

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/dd565640(v=vs.85)?redirectedfrom=MSDN 

Event 1064 - MIME Sniffing Restrictions - No Image Elevation to HTML (Internet Explorer)