Как отобразить blob в кодировке utf8 в VueJS / Javascript

Я пытаюсь преобразовать двоичный BLOB-объект, полученный из базы данных, в изображение, которое я могу отобразить с помощью <img>-Tag.

В моем бэкэнде Laravel я возвращаю blob / data следующим образом:

$user = User::find($id);

$user->photo = utf8_encode($user->photo); // $user->photo is saved as blob in MySQL database

return $user;

Причина, по которой я использую utf8_encode, заключается в том, что данные возвращаются в формате JSON.

В VueJS я пробовал сделать следующее для рендеринга изображения:

<input type = "file" @change = "onFileSelect">
<img :src = "setImage(userdata.photo)">

setImage(image) {
    let objurl = window.URL.createObjectURL(new Blob([image]));

    return objurl;
}

onFileSelect(e) {
    this.userdata.photo = e.target.files[0];
}

Если я выберу файл в input, изображение будет отображаться соответствующим образом. Но когда я получаю данные с сервера, он должен загрузить сохраненное изображение.

Если я использую console.info(image) внутри метода setImage(image) после запроса сервера, я получаю следующий вывод:

PNG

IHDRu<ÔFiCCPICC ProfileHWXSÉ[RIh¤ÞD)Ò¥Ð"Hl$PBL"vdQÁµØÐUE×ÈZ±E±÷e],ØPyºú½÷¾w¾ïÜûçÌÿ̽w­®Dj+ÎÆ3Ç¥¤2I0t.O&aÅÆF(÷Ê»ëQܯ8+¸~ÿ¯¢ÃÈx ±§óe¼\÷ð$Ò|ÞÐn55_¢À ÖÂ!(p¦ (pº W*}âØïLãr¥h6C;³ y4oBì"æÄh!à ¹|# §ÀÐاÇùÎôAN.7s«jQ 9D$äp§ýíøß#a&FÄ)j}»©À4»ÅéÑ1ëBüAÄWúCRòD?j±aÏÄ.|nH$Ä&s¢£ÔöôQb¸BÐBQ>'A=w@¯æ¬æÅÅà)¥ÛÀãüOȳYjþBgÿm0!Y3F-%EC¬ ±,;>RåY ÙÑ>Ry"k}âð?6)C§öæÊêÅEh5®Ê&D¨yvð¸Êü !nY<Ù¸¨ZøPUíØ%8Q]/Ö!ÉSÏ}-ÉUûãTAN¸Ân ±¬ ^=ÈRÅGKòcTyâéYÜѱª|ðBØ 0j:ÈY@ÔÖÝÔ ©FÂHA&gµeF²rD¯ñ üÈç+G Ú¿ZUWg¡-PÎÈO Î þ+g£%ÇÐ"ú):æU1ö³-Qj|©5àI%#aDÜÀýð(x ê{ã>Ù~ó'bG°fìvHWÑcå*§Ì'ò~ÇUÇTtRæRïÒåòY5/(T¼;O2M*Êæ3YðÍ/rļáÃn.®ð­­ø¨^S=ßÄHçm|nGi÷÷÷øf@ãP¨ÝßlöЯpf>O.-PÙpÅ¿PZð2fÀ

Если я передам этот материал своему методу setImage(), я не получу никаких ошибок. URL-адрес большого двоичного объекта создается, но тег <img> показывает просто «пустое» изображение. И так далее. Есть ли способ преобразовать этот blob-объект utf8_encoded во что-нибудь полезное?