Как подгрузить изображение через jQuery?

Question

[freeeeez]

Необходимо заменить номера на сайте картинками. Подключил Intervention Image, все работает, номер выводится картинкой. Теперь его надо по клику на ссылку "Показать номер" подгрузить. Загружаю:
$('.phone-loader').on('click',function (e) {
e.preventDefault();
$.ajax({
url:"/ajax/getPhone",
type:"POST",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data:{ 'id': $(this).data('id') },
success: function(data){
$('#main-phone').attr('src', 'data:image/jpeg;base64,' + data);
}
});
});

Получаю data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

Но картинка не загружается. Пробовал и PNG и менять c base64_encode - не работает. В чем причина?

Comments

[Шамуэй]

Сохраняй в БД только путь к картинке, а картинку в public/images

Answer 1

[freeeeez]

Как обычно, задал вопрос и потом сам нашел решение.
Ошибка была в том, что data:image/png;base64, я подставлял в jQuery, а надо было сразу из контроллера возвращать ответ:

$base64 = 'data:image/png;base64,' . base64_encode($img); return $base64;

, а в jQuery в ответе вставлять просто:
$('#phone').html('<img src="' + data+'" />');

Answer 2

[GrimJack]

Онлайн декодер нормально раскодировал, только я не задавал ему формат файла и получил внутри src атрибута это:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxglj