IE 11 base64 DATA URL 우회 방법

환경

ㆍ브라우저 : IE 11

ㆍ프론트엔드 : vueJS 3.x

ㆍ서버 : Python Django 

 

요약

IE 11에서 이미지 태그에 base64 DATA URL이 지원이 되질 않는다.

<img src="data:image/png;base64,UklGRtIBAABXRUJQV">

 

원인

브라우저 base64 DATA URL 미지원

 

대응

서버로 base64 DATA URL를 보내 출력하는(우회하는) 방법밖에 없다.

 

 

- 프론트 소스 (HTML)

<img v-bind:src="getImageUrl(base64DataUrl)">

 

- 프론트 소스 (JS)

function getImageUrl(dataUrl){
	var apiUrl = '/api/image/base64/decode';
	var dataUrl.split(';');
	var dataUrlArr = dataUrl.split(';');
	return apiUrl + '?data_url=' + dataUrlArr[1];
}

 

- 백엔드 소스 (python)

def base64_decode(request):
    data_url = request.GET.get('data_url', None)
    data = data_url.split(',')
    image_data = base64.b64decode(data[1])
    image = Image.open(BytesIO(image_data))
    response = HttpResponse(content_type="image/png")
    image.save(response, "PNG")
    return response

 

※ 참고 사이트 : http://dean.edwards.name/weblog/2005/06/base64-ie/