读取blob类型图片显示在网页上

最新推荐文章于 2024-06-18 09:01:03 发布
最新推荐文章于 2024-06-18 09:01:03 发布
阅读量577 收藏
点赞数 1
文章标签： java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63921438/article/details/138128628
版权
文章讲述了作者在处理数据库中Blob类型数据时遇到的自动转为字符串的问题，通过解析并去掉blob字符串前缀，然后使用`window.URL.createObjectURL()`成功将其转换回Blob类型，以便于在网页上正确显示。
摘要由CSDN通过智能技术生成

感觉挺坑的，所以记录一下。

从数据库里获取的blob类型会被自动转化为字符串格式，并不是blob格式，比如

这里的img字段就是blob类型，但是此处读取后变成了字符串

可能与我的img类型定义有关，但是我解决了这个问题，可以不需要修改这里

读取blob类型方法为window.URL.createObjectURL(blob)，但是我这里的是字符串类型，所以会一直报错，需要一个方法将获取到的字符串类型的blob转化掉，即以下方法

首先去除blob字符串固定的前缀，经过处理（这里我也不是很懂），得到的blob大概是这个样子

blob:http://localhost:3000/ef55f025-d612-459b-ad43-75d131a6c10a，然后再对这个blob进行

window.URL.createObjectURL(blob)就可以获得到blob2，这里就可直接绑定在网页上的组件src属性上了。

qq_63921438
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
blob格式照片在前端页面的显示
weixin_45684562的博客
05-05 3673
blob格式照片在前端页面的显示 可用img 标签的src请求后台servlet,servlet部分代码如下： response.setContentType( "image/gif "); //如果是gif的图片 int len=blob.length(); //blob为从数据库中读取的blob,如：rs.getBob(0); byte[] image=blob.getBytes(1,len)...
后端blob 怎么显示在页面_各种返回图片在前端显示以及转化
weixin_39981041的博客
12-22 3857
前言作为前端工程师 的我们，日常少不了会跟图片打交道。以下是我了解的。一、图片在后端中存储一般来说，图片在后端的存储方式分为两种：其一：可以将图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中;其二：将图片转换成二进制流，直接存储到数据库的 Image 类型字段中.对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。对于第二种存储方式，我们前端需要将其...
图片路径带有blob的图片显示不出来
qq_62674723的博客
08-21 5353
前端展示的时候渲染不出来，重新上传后，图片正常，但是刷新后还是不显示。图片上传用的element ui的图片上传组件，借助文件下载接口，我上传的同时还存到了cookie里，成功解决问题。做项目写个人信息页面时，后端返回的数据中，图片的路径带有blob（如下图）
blob文件流前端显示pdf三种方法
最新发布
qq_30351747的博客
06-18 742
blob文件预览pdf三种方式
前端如何展示后台返回的一张blob图片（接口里面显示的是一张图片）
热门推荐
weixin_44524243的博客
04-28 1万+
后端返回的图片不是url，而是显示的图片（blob数据），前端如何在img里面展示出来。 如图所示为后端返回的图片。 以axios为例，我们 传递的 responseType要是blob类型responseType: 'blob', 然后走window.URL.createObjectURL将其返回的数据处理一下window.URL.createObjectURL(res)， 将处理好的数据放在img便签里面就成功了。 上个完整的代码，（axios封装的） this.$http({ url
blob和ArrayBuffer格式图片如何显示
qq_44161722的博客
10-17 471
【代码】blob和ArrayBuffer格式图片如何显示。
使用Blob对象接收后台返回的图片流并展示到前端页面
MISS_zhang_0110的博客
08-17 3423
代码】使用Blob对象接收后台返回的图片流并展示到前端页面。
数据图片的生成和一些操作
茶花漫道
08-20 1038
 先前在做项目时也对图片做过处理，只是后来换了应用服务器平台之后发现不少问题，于是进行深入学习，找人探讨，终于算是摸出一些门路。1.图片存储在图片的存储字段方面，SQL Server和My SQL都有相应的字段，而在Oracle里没有明确的字段，但也提供了几个大型字段，一般，我们存储在BLOB类型里。这里有个CLOB和BLOB字段的讨论，网上学习之后知道，BLOB存储的是二进制流，而C
浏览器展示Blob/File文件
XuZhiqiang的博客
02-29 903
Blob/File转Base64，展示Blob/File
上传图片获取base64，blob数据直接显示在网页
limmt2020的博客
10-12 1181
上传图片获取base64，blob数据直接显示在网页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
java实现本地读取图片存储到数据库中并在html网页显示
05-18
创建一个PreparedStatement，将图片数据作为Blob类型存储。假设我们有一个名为`images`的表，包含`id`和`image_data`两个字段，代码如下： ```java Connection conn = DriverManager.getConnection("jdbc:mysql://...
mysql,blob格式存储图片事例,商品展示页面
06-29
欢迎访问百度贴吧 : 世态炎凉一依然 吧. 本项目事例来自 世态炎凉一依然 吧. 内容为商品展示,数据库采用mysql,商品图 片存储在数据库中
jsp1.rar_jsp blob_jsp 图片_mysql blob_图片 MySQL
09-14
综上所述，"jsp blob_jsp 图片_mysql blob_图片 MySQL"这个主题涵盖了从数据库读取和展示图片的关键步骤，包括JSP、BLOB类型和MySQL的使用。在开发过程中，理解这些概念和技术对于构建功能完备的Web应用程序至关重要...
Access数据库里二进制数据读取，并显示为图片.rar
09-24
本主题聚焦于Access数据库中如何处理二进制大数据（Blob，Binary Large Object），特别是如何从数据库中读取这些二进制数据并将其显示为图片。 Access数据库中的二进制数据通常存储在“OLE对象”或“附件”字段中，...
html5实现页面的显示本地图片
04-04
这个方法会返回一个包含图片数据的DataURL，可以被直接设置为`<img>`元素的`src`属性，从而在页面上显示图片。 HTML5的File API还提供了其他有用的方法和属性，如`File.size`用于获取文件大小，`File.name`获取...
从数据库读取图片文件
07-02
例如，MySQL、Oracle、SQL Server、PostgreSQL等都提供了BLOB类型，但它们在处理大文件和性能方面可能存在差异。选择合适的数据库系统是存储和检索图片的关键。 3. **存储过程**：将图片文件存储到数据库通常涉及一...
blob照片显示 oracle_JAVA读取Oracle中的blob图片字段并显示
weixin_39850920的博客
12-22 335
近期，在给客户做一个Demo页面时，需要用JAVA读取Oracle中的blob图片字段并显示，在此过程中，遇到一些问题，例如：连接Oracle数据库读取blob字段数据，对图片byte数据进行缩放等；特此记录，给自己备忘，给大家参考。整个流程分为四步，连接oracle数据库 -> 读取blob图片字段 -> 对图片进行缩放 ->把图片展示在jsp页面上。下面进行详细描述：1. j...
mysql blob显示_显示存储在mysql blob中的图像
weixin_29646607的博客
01-18 181
when i run the code below it displays an image that is stored in a mysql Db as a blob variable. The problem is if I echo out anything else, even something as simple as echo '--------'; before I call t...
使用【Blob、Base64】两种方式显示【文本、图片、视频】 & 使用 video 组件播放视频
凉了的凉茶的博客
10-11 4956
Blob 对象的类型是由 MIME 类型（Multipurpose Internet Mail Extensions）来确定的。MIME 类型是一种标准，用于表示文档、图像、音频、视频等多媒体文件的类型。
读取mysql中的blob数据用django显示在html上
06-07
首先，你需要在 Django 中设置用于连接 MySQL 数据库的数据库引擎和数据库连接。可以使用 `pymysql` 或 `mysqlclient` 库来实现。 在 Django 中，你需要创建一个视图函数来处理请求并从 MySQL 数据库中读取 blob 数据。以下是一个基本的示例视图函数，该函数可以从 MySQL 数据库中读取 blob 数据并将其转换为 Base64 编码的字符串： ```python import base64 from django.shortcuts import render from django.db import connection def read_blob(request): cursor = connection.cursor() cursor.execute('SELECT image_blob FROM my_table WHERE id = %s', [1]) row = cursor.fetchone() cursor.close() if row: image_blob = row[0] image_base64 = base64.b64encode(image_blob).decode('utf-8') return render(request, 'template.html', {'image_base64': image_base64}) else: return render(request, 'template.html', {'image_base64': None}) ``` 在上面的代码示例中，`image_blob` 是从 MySQL 数据库中读取的 blob 数据。`base64.b64encode()` 函数将 blob 数据转换为 Base64 编码的字符串。然后，将该字符串传递到渲染模板中的上下文中。 在模板中，你可以使用以下代码将 Base64 编码的字符串转换回图像： ```html <img src="data:image/jpeg;base64,{{ image_base64 }}" /> ``` 请确保将 `data:image/jpeg;base64` 中的 `image/jpeg` 替换为实际图像的 MIME 类型。如果你的图像不是 JPEG 格式，请相应地更改 MIME 类型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值