前端：blob转换为图片URL，但是图片不显示

n_2021

已于 2022-07-11 11:49:40 修改

阅读量7k

点赞数

文章标签： vue elementui js 前端

于 2022-07-11 11:48:35 首次发布

本文链接：https://blog.csdn.net/n_2021/article/details/125718358

版权

问题描述：

vue页面包含有轮播图、tab切换。轮播图的图片接口返回的是blob类型数据，js里也将blob处理成url地址赋值给图片的src了，但是首页就是不显示图片，此时触发tab切换时，轮播图的图片立马显示。tab切换与轮播图是不同的div

猜测原因：

tab切换绑定了v-if，猜测v-if影响blob的url渲染

解决代码：

结果：

加上v-if之后，图片立马加载出来

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

n_2021

关注关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

SpringBoot整合Mybatis实现从数据库中读取blob属性的图片在html页面中无法显示并且出现乱码实体类，如何解决？

**My Coding Family**

04-18

772

ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。码字不易，如果这篇文章对你有所帮助，帮忙给bugj菌来个，您的支持就是我坚持写作分享知识点传播技术的最大动力。「猿圈奇妙屋」；

Vue前端处理blob二进制对象图片的方法

weixin_69117911的博客

11-06

6614

Vue处理blob类型

参与评论您还未登录，请先登录后发表或查看评论

前端拿到图片数据流无法显示问题

最新发布

a983677218的博客

07-22

498

一般来说我们会通过图片动态绑定url地址，去显示图片。前端在接收到后端返回的二进制数据量后会通过blob的形式去创建临时url显示图片。*前端请求部分(这里必须加上 responseType: "blob")不然虽然前端可以拿到数据流，但是会无法显示。

图片路径带有blob的图片显示不出来

qq_62674723的博客

08-21

5562

前端展示的时候渲染不出来，重新上传后，图片正常，但是刷新后还是不显示。图片上传用的element ui的图片上传组件，借助文件下载接口，我上传的同时还存到了cookie里，成功解决问题。做项目写个人信息页面时，后端返回的数据中，图片的路径带有blob（如下图）

Java面向对象概念简介以及简单应用

Zhangt_1024的博客

11-07

310

Java面向对象思想

blob 图片_《你不知道的 Blob》番外篇

weixin_39990401的博客

11-20

998

学习时间：2020.06.06学习章节：《你不知道的 Blob》原文对 Blob 的知识点介绍得非常完整清晰，本文通过四个问题来总结本文核心知识：Blob 是什么？Blob 怎么用？Blob 有哪些使用场景？Blob 与 ArrayBuffer 有何区别？一、Blob 是什么？Blob(Binary Large Object)表示二进制类型的大对象，通常是影像、声音或多媒体文件。MySql/Or...

React加载Blob不展示

XIAOXUTONGXU_的博客

03-10

953

React解决Blob不展示问题、Java、验证码生成工具类

Java从数据库中读取Blob对象图片并显示的方法

09-03

在JSP页面中，你可以使用以下代码将图片显示出来： ```html <img name="pic" src="<%=basePath+"servlet/DownloadAsStream"%>"/> ``` 这里的`basePath`是应用的基础路径，`servlet/DownloadAsStream`是处理Blob...

html本地图片转为blob,前端图片canvas，File，Blob，Data Url等格式转换

weixin_30600615的博客

05-31

1732

将file转化成blob利用URL.createObjectURL()let $img = document.getElementById('img')file.onchange = function (e) {let file = e.target.files[0]let fileUrl = window.URL.createObjectURL(file)$img.src = fileUrlim...

js如何获取图片url的Blob值并预览示例代码

10-17

在讨论如何使用JavaScript来获取图片的URL并转换为Blob值以进行预览时，首先要了解几个关键概念：Blob对象、XMLHttpRequest对象、FileReader对象以及File接口。下面我将详细解释这些概念，并展示如何使用这些技术来...

javascript二进制流转图片的操作方法：File、Blob、FileReader、ArrayBuffer、Base64格式之间的转换

iOS逆向与安全

06-04

1630

如果你有一个image/png格式的二进制流，你可以使用Blob对象和URL.createObjectURL方法来创建一个可以在网页上显示的图片URL。添加 {responseType: ‘arraybuffer’} 请求头,获取ArrayBuffer类型数据,再转码成base64。html: 使用img标签来加载图片，并将图片的src属性设置为HTTPS URL。获取blob类型数据。

ios wkwebview blob图片预览 get<img> error: 怎么处理，前端转换blob为base64

06-13

这是因为 WKWebView 不支持 Blob URL，而是需要将 Blob URL 转换为 Data URL (Base64) 格式的 URL。以下是一种将 Blob URL 转换为 Data URL 的方法： ```javascript function blobToDataURL(blob, callback) { ...

php blob字段没显示,显示数据库中blob类型的图片，小弟我图片显示不出来

weixin_28846405的博客

03-17

460

显示数据库中blob类型的图片，我图片显示不出来showimage.php

php blob 图片显示不出,php – 如何从mysql blob显示图像

weixin_42500818的博客

03-21

555

我试图从MySQL blob字段显示图像.我尝试了一些不同的东西,但似乎都没有.我努力了：> header(“Content-type：$type”); img src = $blobData;> header(“Content-type：$type”);回波($blobData);解决方法:您可以考虑的另一个选项(假设您使用的是Apache)：为所有图像扩展(png,jpg,gif)...

oracle 图片显示不出,Sql Server 中image类型迁移到Oracle 中Blob类型出现图片显示不出来，why????请博客们帮忙 | 学步园...

weixin_39676034的博客

04-12

241

我现在在一项目中碰到这么一个问题Sql Server 中image类型迁移到Oracle Blob类型出现图片显示不出来，我在Sql Server 中看了一条image数据如下：1。Sql Server中select datalength(d.photo) from drivers d where d.Name like '%陆斌%'输出如下132727select d.photo from dr...

前端学习（2284）：react之遍历对象回顾

歌谣的博客

09-26

275

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.

图片路径前缀有blob？图片渲染不出来？

热门推荐

你若盛开，清风自来

01-05

1万+

写bug 你们遇见过这种图片路径咩就很奇葩吧哈哈因为我图片渲染不出来~ 好像我保存之后就有这个数据库也是有这个前缀我的代码是这样的： handleAvatarSuccess(response, file, fileList) { const url = "http://localhost:7001" + file.response.url; console.log(url, "------------------------"); this.image = URL.createOb

图片路径带有blob前端渲染不出来问题

qq_62674723的博客

08-21

1908

前端怎么把blob转换成图片

09-19

前端可以使用以下步骤将Blob转换为图片： 1. 首先，我们需要获取到Blob对象。Blob是二进制大对象，表示各种类型的文件，如图像、视频、音频等。可以通过File API或者XHR请求获取Blob对象。 2. 接下来，我们需要创建一个用于显示图片的HTML元素，比如img标签。可以通过document.createElement('img')方法创建一个img元素。 3. 为了将Blob对象转换为图片，我们需要创建一个URL对象，即使用URL.createObjectURL()方法。此方法将Blob对象作为参数，并返回一个URL字符串。 4. 将URL字符串作为img元素的src属性值，即可以让img元素显示Blob对象代表的图片。下面是一个简单的示例代码： ```javascript // 假设我们已经获取到了名为blob的Blob对象 const img = document.createElement('img'); const url = URL.createObjectURL(blob); img.src = url; document.body.appendChild(img); ``` 以上代码将在body元素中添加一个img标签，并将Blob对象转换为图片进行显示。需要注意的是，当不再需要使用Blob对象时，应该及时释放创建的URL对象，可以通过调用URL.revokeObjectURL()方法实现，以防止内存泄漏： ```javascript URL.revokeObjectURL(url); ``` 这样就完成了前端将Blob对象转换为图片的过程。