如何在ejs网页上显示一个type blob图片？
在ejs网页上显示一个type blob图片的方法如下：
- 首先，确保你已经拿到了一个type为blob的图片数据。可以通过以下方式获取：
- 使用XMLHttpRequest或Fetch API从服务器获取图片数据。
- 使用HTML5的File API从用户的本地文件系统获取图片数据。
- 使用Canvas API将其他类型的图片转换为blob类型。
- 在后端，将获取到的blob图片数据传递给前端ejs模板。可以通过将blob数据转换为Base64编码的字符串，或者将blob数据保存到服务器上并传递图片的URL地址。
- 在ejs模板中，使用img标签来显示图片。将img标签的src属性设置为blob图片数据的URL地址或Base64编码的字符串。
下面是一个示例代码：
后端（Node.js）：
const fs = require('fs');
const ejs = require('ejs');
// 读取图片文件为blob数据
const imageBlob = fs.readFileSync('path/to/image.jpg');
// 将blob数据转换为Base64编码的字符串
const base64Image = imageBlob.toString('base64');
// 渲染ejs模板并传递图片数据
const html = ejs.renderFile('path/to/template.ejs', { image: base64Image });
// 返回渲染后的HTML页面
res.send(html);前端（ejs模板）：
<!DOCTYPE html>
<html>
<head>
<title>显示blob图片</title>
</head>
<body>
<img src="data:image/jpeg;base64,<%= image %>" alt="blob图片">
</body>
</html>在上述示例中，我们首先读取了一个图片文件并将其转换为blob数据。然后，将blob数据转换为Base64编码的字符串，并将其传递给ejs模板。在ejs模板中，我们使用img标签来显示图片，将src属性设置为Base64编码的字符串。
请注意，这只是一个示例，实际应用中可能需要根据具体情况进行适当的调整。
相关·内容
我使用long blob创建了一个数据库，并将我的图像存储在其中。然后我想把这些图片显示到我的一个ejs网页上。然而，它显示为奇怪的字母。我知道我应该转换它，这样它才能工作，我只是不知道怎么做。这是我运行node-js服务器时显示的内容：
这是我在ejs中使用的代码：
<% for (var i = 0; i < products.length; i+
浏览 4提问于2018-08-05得票数 0
1回答
嗨，我之前问了一个类似的问题，关于从MySQL数据库Blob中检索图像。我使用的代码如下：print $image; //where image is the blob file
这段代码是嵌套在网页中的，所以我还应该修改页眉吗？当我包含header()时，它删除了所有网页</e
浏览 3提问于2009-11-20得票数 0
我将它作为blob图像存储在数据库中。如果"photo“是我的图片栏，那么当我渲染网页中的其他栏时，例如："render.column_name”，它工作得很好。但是，当我对图像执行此操作时，如"render.photo"，DB将返回类似"jpa.blob.....“的内容。在我的网页上。有人能告诉我如何显示存储在数据库中的这张图片吗？
浏览 6提问于2012-08-14得票数 1
1回答
有2个不同的项目，第一个是管理仪表板，另一个是网页本身。如果您通过管理仪表板将图片上传到数据库中，则会将其另存为blob文件。如何在网页项目中显示数据库中的照片？
浏览 13提问于2021-03-29得票数 0
回答已采纳
1回答
我希望我的数据显示从数据库到网页。'mongoose';
learningEvents:{ }, type:Array indicators:{
type:Array
浏览 24提问于2019-11-11得票数 0
我正在尝试显示来自mySQL的blob图像，但得到的却是奇怪的字符。data into mysql$result=mysql_query($sql);要显示以下内容$result) {}
//header(&#
浏览 0提问于2011-06-03得票数 1
我正在试着为我写的代码制作一个菜单，但是无论我做什么修改，我仍然不能让它工作。我是一个完全的初学者，所以我不是很熟悉HTML的使用方法。我希望菜单使用一个图标，当我单击该图标时，菜单就会出现。此外，我希望在菜单中的项目有另一个自己的下拉菜单。请帮帮忙。
我遇到的另一个问题是，我为每个列表项都制作了一个图标。我想让它有一个在线网址，以便任何人谁查看该页面可以看到它。
浏览 1提问于2020-04-02得票数 0
2回答
我想提出一个网站，是一个化妆品项目。我想为他们创建产品信息，每个产品都有一个图像，我为他们做了一个URL，我想为他们使用一个ejs。例:对于一个产品的图像，我想写<%= product.img %>，产品图像会显示出来，我不知道如何在MongoDB数据库中放置URL，当我在.ejs文件中输入ejs时，它会显示产品的图像。我在google上搜索了很多，所
浏览 3提问于2022-09-27得票数 0
2回答
我只想在我的网页中显示我的DB blob来制作个人资料图片，但它不工作，它显示我的img在一个完整的选项卡中，但我想显示我的img作为一个标签，将其他信息放在我的页面上。* FROM prj_img where id = 1 "); $stmt->execute();
$blob= $stmt-&g
浏览 17提问于2020-05-19得票数 0
1回答
我有一个有6个字段的表，这个image字段是BLOB类型，image_name字段图像文件名和扩展名。我知道如何从blob字段中获取存储的图像并显示到我的网页上，我通过phpmyadmin上传图像进行了测试。我的问题是如何在我的image字段中存储图像。<?><input type="file" name="image&q
浏览 0提问于2012-11-20得票数 0
我正在做一个nodejs应用程序，它显示存储在服务器上的图片，我使用multer将图片存储在同一目录中，我使用mongodb作为我的数据库来存储用户上传的图片的路径，然后我读取路径并显示图片，如下所示/'+postobj.blob.path%> <img class='onbottomimage' src="&
浏览 71提问于2020-07-18得票数 0
回答已采纳
我使用以下代码创建了一个ImageUrl，并对类型记录进行了反应。它制作了一个URL，但是没有显示图片图像。点击网址(如"“)会出现以下错误。我怎么才能解决这个问题？setPhotoUrl] = useState<string>('');
const blob= new Blob([pictureData], {
浏览 17提问于2022-11-17得票数 2
回答已采纳
id="ini">${a.dataString}</div></c:forEach>var blob= [];
console.log(blob)
浏览 1提问于2018-07-27得票数 2
回答已采纳
2回答
我可以从剪贴板上截取屏幕截图，将其发送到ajax并放入<img>标记中吗？></div> <button type="submit">Answer!</button>我需要它！人们要求从剪贴板上截图。在代码base64中，如果屏幕停留在剪贴板中，那么我可以让它变成一张图片。
我只是不知道如何从剪贴板
浏览 0提问于2019-04-07得票数 0
我试图用多个图像上传输入字段显示选定文件的缩略图。它应该是这样运作的-
图片开始使用create_blob(file, callback)函数转换
浏览 1提问于2019-04-06得票数 1
回答已采纳
当前有一个请求，要求将表单窗口中的数据自动添加到两个表中。我能够用简单的insert函数作为进程来完成这个任务，但在我的一生中，我不知道如何使用am insert函数获得文件浏览中的附加文件来附加到另一个表。blob列总是显示为不支持的数据类型。insert into ATTACHMENTS_AVAIL ("ADDED_FILE", "MIMETYPE", "FILENAME", "CONTRACTOR_ID", "DATE_ADDE
浏览 1提问于2017-09-06得票数 0
我想显示一个图像，这是从mysql数据库检索显示在网页上。我使用了以下代码。它在屏幕上显示图像，但不在网页上显示。 image = Image.open('statics/rohan2.jpg')
blob_valuestatic
浏览 7提问于2018-01-17得票数 0
回答已采纳
1回答
我正在尝试使用雪花和Nodejs来设计一个API。为此，我使用以下内容：我想从雪花中获取数据，并将其显示在我的ejs网页上。如果有人使用nodejs和雪花获取数据并将其填充到网页上，请提供帮助。app.use(express.static("public"));app.set("
浏览 7提问于2022-01-05得票数 1
该responseType是blob，因为我需要一个Blob文件的结果。，并在Chrome上运行。http client download result: Blob {size: 174016, type: "application/pdf"} 但在iOS或安卓系统上，结果是空的http clientPS:这是一个简单的游乐场，只需下载一张测试图片：https://github.co
浏览 14提问于2019-09-19得票数 1
回答已采纳
我想使用浏览器端的javascript将文本/html字符串作为Azure blob直接从web浏览器上传到Azure存储(而无需首先通过Azure VM/web服务器)。我还发现了一个可以在Node.JS 中使用服务器端javascript进行上传的库。我的问题是，如何只使用浏览器端的javascript、html和SAS (不使用Silverlight或MVC)将文本字符串上传到Azure blob，并在不通过web服务器的情况下直接上传到Azure
浏览 2提问于2012-10-09得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
