Я пытаюсь преобразовать двоичный двоичный объект, извлеченный из базы данных, в изображение, которое можно отобразить с помощью <img> -Tag.
В моем бэкэнде Laravel я возвращаю BLOB-объект / данные следующим образом:
$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.log(image) внутри метода setImage(image) после запроса к серверу, я получаю следующий вывод:
PNG * * тысяча двадцать-одна
IHDRu <ÔFiCCPICC ProfileHWXSÉ [RIh¤ÞD) Ò ¥ ¥ «Hl $ PBL» vdQÁµØÐUE × ÈZ ± E ± ÷ e], ØPyºú½ ÷ ¾w¾ïÜûçÌÿ̽w®Dj + ÎÆ3Ç ¥ a Æ I 0 I I 0 ¸ ~ ÿ¯ ¢ ÃÈx ± §óe¼ \ ÷ ð $ Ò | ÞÐn55_ ¢ À ÖÂ! (P¦
(pº
W *} âØïLãr ¥ h6C; ³ y4oBì "æÄh! À ¹ | # §АÐاÇùÎôAN.7s« jQ
9D $ äp§ýíøß # A & метрономы) J} »© À4» ÅéÑ1ëBüAÄWúCRòD Ja ± AIA |?. Nh $ A & ¢ £ сек ÔöôQb¸BÐBQ> 'А = ш @ ¯æ¬æÅÅà) ¥ Ua A ü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µe F²rD¯ñ üÈç + G Ú¿ZUWg¡-PÎÈO Î þ + g £% úÐ" ú): æU1ö³-Qj | © 5àI % # aDÜÀýð (х
ê {ã> и- ó'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-адрес BLOB-объекта создан, но тег <img> показывает только «пустое» изображение.
И так далее. Есть ли способ, как я могу преобразовать этот utf8_encoded BLOB в нечто полезное?