jQuery ajax get image with blob data

by Luke Harby

HTML

<a href="#" class="trigger">Trigger</a>
<img src="" id="wrapper" />

CSS

body {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

JavaScript

const trigger = $('.trigger');
const wrapper = $('#wrapper');
const url = 'https://66.media.tumblr.com/35a8d8dac5c288505b3edb4a52655283/ee225bfce5e62623-af/s1280x1920/fad4e25562ce1b05c69dc8cc8da5a9a12d26a1aa.jpg';


trigger.on('click', () => {
	$.ajax({
  	url,
	  xhrFields:{
  	  responseType: 'blob'
	  },
  	success (data) {
	    const url = window.URL || window.webkitURL;
  	  const src = url.createObjectURL(data);
    	wrapper.attr('src', src);
	  }
	});
});