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

最新推荐文章于 2024-06-18 09:01:03 发布
最新推荐文章于 2024-06-18 09:01:03 发布
阅读量476 收藏
点赞数 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_39981041的博客
12-22 3846
前言作为前端工程师 的我们，日常少不了会跟图片打交道。以下是我了解的。一、图片在后端中存储一般来说，图片在后端的存储方式分为两种：其一：可以将图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中;其二：将图片转换成二进制流，直接存储到数据库的 Image 类型字段中.对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。对于第二种存储方式，我们前端需要将其...
java实现本地读取图片存储到数据库中并在html网页显示
05-18
创建一个PreparedStatement，将图片数据作为Blob类型存储。假设我们有一个名为`images`的表，包含`id`和`image_data`两个字段，代码如下： ```java Connection conn = DriverManager.getConnection("jdbc:mysql://...
前端使用blob展示二进制的图片
weixin_56071908的博客
12-31 1083
//DOM var img = document.getElementById('img') //Ajax var xhr = new XMLHttpRequest() // 设置返回类型为blob xhr.responseType = "blob"; xhr.addEventListener('load',() => { console.log(xhr.response); var b...
【blob图片预览】后端返回blob格式图片，前端进行展示
六耳石猴的博客
06-15 2062
【代码】【blob图片预览】后端返回blob格式图片，前端进行展示。
blob文件流前端显示pdf三种方法
最新发布
qq_30351747的博客
06-18 453
blob文件预览pdf三种方式
上传图片获取base64，blob数据直接显示在网页
limmt2020的博客
10-12 1166
上传图片获取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
数据图片的生成和一些操作
茶花漫道
08-20 1021
 先前在做项目时也对图片做过处理，只是后来换了应用服务器平台之后发现不少问题，于是进行深入学习，找人探讨，终于算是摸出一些门路。1.图片存储在图片的存储字段方面，SQL Server和My SQL都有相应的字段，而在Oracle里没有明确的字段，但也提供了几个大型字段，一般，我们存储在BLOB类型里。这里有个CLOB和BLOB字段的讨论，网上学习之后知道，BLOB存储的是二进制流，而C
浏览器展示Blob/File文件
XuZhiqiang的博客
02-29 872
Blob/File转Base64，展示Blob/File
使用Blob对象接收后台返回的图片流并展示到前端页面
MISS_zhang_0110的博客
08-17 3362
代码】使用Blob对象接收后台返回的图片流并展示到前端页面。
mysql blob显示_显示存储在mysql blob中的图像
weixin_29646607的博客
01-18 171
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...
jsp1.rar_jsp blob_jsp 图片_mysql blob_图片 MySQL
09-14
综上所述，"jsp blob_jsp 图片_mysql blob_图片 MySQL"这个主题涵盖了从数据库读取和展示图片的关键步骤，包括JSP、BLOB类型和MySQL的使用。在开发过程中，理解这些概念和技术对于构建功能完备的Web应用程序至关重要...
Img2Blobjs是一款可以为图片添加自定义水印的jquery插件
08-10
Img2Blob.js是一款可以为图片添加自定义水印的jquery插件。该图片水印插件可以将图片转换为blob对象，然后为其添加自定义水印效果。
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对象转为file文件，并在img中展示
qq_51532249的博客
06-19 2639
创建一个 Blob 对象，然后将其转换为 File 对象并将其用作图像的源
如何处理BLOB类型数据之三：使用Servlet在页面上显示BLOB中的图片
天地一沙鸥
08-20 2082
实验环境：JDeveloper 11.1.2.0.0。 接上一个实验《如何处理BLOB类型数据之二：下载BLOB内容并保存到文件中》。 我的设计思想： 这其实是一个动态显示图片的问题，类似于很多网站上登录时要求输入的图片认证码。 一开始，根据前面的思路，我打算继续使用ADF BC的来显示BLOB中的图片内容，后来发现这个功能相对来说比较独立，于是就想写一个通用的，这样没有ADF也可以使
img显示从数据库取出blob字段
weixin_33849942的博客
06-06 837
@RequestMapping("/getPictureForpeople")public void getPictureForpeople(HttpServletRequest request, HttpServletResponse response) throws IOException, SQLException { Connection conn = null; conn =...
img src 显示内容加密blob
qq_18565029的博客
03-31 7194
img src 显示内容加密blob <img id="img1" src=""> <script type="text/javascript"> //创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); //配置请求方式、请求地址以及是否同步 xhr.open('POST', 'js/goug...
读取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、付费专栏及课程。

余额充值