如何在VueJS/JavaScript中渲染UTF-8编码的Blob图片

这个问题的核心在于你错误地用utf8_encode()处理了二进制图片Blob数据——二进制不是文本，强行转UTF-8会彻底破坏图片的字节结构，导致前端拿到的是一堆损坏的内容，自然渲染不出来。下面是两种可行的解决思路：

方案一：Base64编码传输（适合小图片） #

后端（Laravel）调整 #

把Blob二进制数据转换成Base64字符串，这样可以安全地通过JSON传输，不会出现编码问题：

$user = User::find($id);
// 将Blob二进制转为Base64编码字符串
$user->photo = base64_encode($user->photo);
return $user;

前端（Vue）调整 #

拿到Base64编码后，直接用data URI格式作为图片的src：

setImage(image) {
  // 根据实际图片格式修改类型，比如JPG用image/jpeg
  return `data:image/png;base64,${image}`;
}

同时，为了保持前后端格式一致，上传文件时也可以转成Base64：

onFileSelect(e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    // 提取Base64编码部分（去掉data:image/xxx;base64,前缀）
    this.userdata.photo = e.target.result.split(',')[1];
  };
  reader.readAsDataURL(file);
}

方案二：单独接口返回二进制图片（适合大图片，更高效） #

如果图片体积较大，Base64会增加额外的体积开销，推荐单独写一个接口返回原始二进制图片：

后端（Laravel）新增接口 #

public function getUserPhoto($id)
{
    $user = User::findOrFail($id);
    // 根据图片实际类型设置Content-Type，比如JPG用image/jpeg
    return response($user->photo)->header('Content-Type', 'image/png');
}

前端（Vue）直接使用接口URL #

不需要再处理setImage方法，直接把接口地址作为img的src：

<img :src="`/api/users/${userdata.id}/photo`">

这两种方案都能解决你当前的问题，你可以根据图片大小和业务场景选择合适的方式。

内容的提问来源于stack exchange，提问作者Mango D