Question

我正在尝试将从数据库获取的二进制blob转换为可以使用<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配置文件HWXSÉ[RIh¤ÞD）Ò¥Ð“ Hl $ PBL” vdQÁµØÐUE×ÈZ±E±÷e]，ØPyºú½÷¾w¾ïÜûçÌÿÌ½ww®Dj+Î3Ç¥¤2I0t.O＆aÅÆF（÷Ê»Q ¸〜ÿ¯¢ÃÈ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Ú¿ |©5àI％＃aDÜÀýð（x   ê{ãÙÙóóbg°fìvHWÑcå*§Ì'ò〜ÇUÇTtRæRïÒåòY5/（T¼; O2M *Êæ3YðÍ/rÄ¼áÃnn.®ðø¨^ S =ßÄHçm| nGi÷÷÷øf@ãP¨ÝßlöÐ¯pf>。 -PÙpÅ¿PZð2fÀ

如果我将这些内容传递给我的setImage()方法，则不会出现任何错误。已创建Blob URL，但是<img>标签仅显示“空”图像。等等。有什么方法可以将utf8_encoded Blob转换成有用的东西吗？

Answer 1

我无法发表评论，因此不得不发表评论。如果需要，我将删除。

您可以使用库来处理前端的Blob解析。

https://www.npmjs.com/package/blob-util

该库内置了ES模块支持，因此应该与Vue即用。

如何在VueJS / Javascript中渲染utf8编码的blob

1 个答案: