如何在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编码的字符串。

请注意，这只是一个示例，实际应用中可能需要根据具体情况进行适当的调整。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

hexo配置自己的博客站点

最近业余时间利用hexo为自己搭建一个高度自定义的个人站点，站点发布在github上，访问地址为：https://cqhaibin.github.io/。本博客简单介绍实现此站点的过程。...1. hexo常用命令命令名说明 hexo init 初始化一个hexo项目 hexo server 启动本web服务，用于开发阶段 hexo g 生成静态网页 hexo d 部署网页 hexo clean...post.ejs 文章详细页 page.ejs 页面 archive.ejs 归档列表页模板，归档可以按照年份+月份实现的，list_archives显示列表 category.ejs 分类显示页 tag.ejs...标签页 hexo的模板解析，以layout.ejs为入口，所有静态页面（如：文章、页面、首页、标签、归档、分类等）都会以layout.ejs为模板。...所以每个页面的公共部分应该在写layout.ejs中(如页头、页脚等）。

8657 0

使用express框架开发，如何在ejs文件中导入外部的js、css文件

在使用ejs模版的过程中遇到了这个问题：如何在ejs模版中导入外部的js、css文件。我猜测，ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。...那把包括了js、css以及图片的静态文件放到public文件夹下又该怎么使用呢？看图： ?...笔者这里的情况如下：基于node.js ，使用express开发一个blog网站：项目目录： ? 这里引用外部js和css文件的ejs页面的代码： <!...dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为 true //dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层..., url : "图片地址" // 上传成功时才返回 } */ }); });

9.7K0 0

Matery之Valine评论优化

3917 0

Hexo添加PWA支持

在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。...display: {string} 显示类型 fullscreen 应用的显示界面将占满整个屏幕 standalone 浏览器相关UI（如导航栏、工具栏等）将会被隐藏 minimal-ui 显示形式与...standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同 browser 浏览器模式，与普通网页在浏览器中打开的显示一致 scope: {string} 作用域 scope...如果需要填写多个尺寸，则使用空格进行间隔，如”48x48 96x96 128x128” type {string} 图标的 mime 类型，非必填项，该字段可让浏览器快速忽略掉不支持的图标类型 sw.js...如果你的地址栏没有出现这个加号，首先在新的标签页上的地址栏输入Chrome://flags，然后再搜索栏输入PWAS进行查找，会出现两个选项一个为Desktop PWAs local updating，

1.1K1 0

前端文件下载汇总「案例讲解」

同源链接案例中，我们将开启一个服务器端渲染 Server-Side Rendering(SSR) 的项目： ssr-app ├── public │ └── test.txt ├── index.ejs...通过 Blob 下载上面我们讲解完了通过超链接下载文件，本小节我们讲讲如何将文件内容转成 Blob 文件。 Blod 对象表示一个不可变、原始数据的类文件对象。...同时，可以设置 filename 参数指定下载文件的名称，如上示例 inline 控制内联显示。告诉浏览器在页面中直接内联现实响应体，而不是下载。一些图片，PDF 等文件的展示比较常用。...在其基础上更改模版文件 index.ejs 内容为： SSR Download File <!...本案例，假设我们已经编写好了前端分离的接口文件（接口跨域请求），案例服务端结构如原生的 XMLHttpRequest。

1861 0

解决 hexo 博客的图片链接失效问题

1.首先找到 hexo 博客的主题文件夹目录 D:\Blog_leader755\themes\halo\layout\_partial\head.ejs 修改上述路径的文件 head.ejs ，因为每个页面都会包含...所以把放到 archive-book.ejs 的最前面。然后在网页结构里就会是这个样子： .........main"> <article class="article article-links article-<em>type</em>-list...所以理论<em>上</em>也就规避了<em>图片</em>的防盗链了。划重点，但是并没有如愿解决不蒜子的跨域问题。...img 的类名 image.png 在文件夹中全局搜索类名，找到如下代码： image.png //为文章内的<em>图片</em>添加no-referrer来隐藏referer（解决第三方<em>图片</em>外链不<em>显示</em>问题） $(this

1.3K1 0

Windows环境下搭建一个Hexo博客

找不到你想要的页面 :(" 然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下： /* don't remove..., 如果为 false, 则主题中的其他图片, 也会做懒加载, 如头像, logo 等任何图片. loadingImg - 图片未加载时的代替图不填写使用默认加载图片, 如果需要自定义，添填入 loading...如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。...（单纯的屏蔽鼠标右键和键盘事件）在 themes/matery/layout/layout.ejs 添加如下代码找个合适的位置添加如下代码 /*屏蔽网页源码*/ <script type="text...如果你不想改动CSS文件，你可以通过在网页头部中的标签内部加入内联CSS代码的形式实现网站网页变灰 html { filter: progid:DXImageTransform.Microsoft.BasicImage

1.7K1 0

Nodejs学习笔记（六）--- Node.js + Express 构建网站预备知识

新建express项目并自定义路由规则 1.首先用命令行express+ejs创建一个项目sampleEjsPre cd 工作目录 express -e sampleEjsPre cd sampleEjsPre...如果要做一个网站应用，不可避免的会遇到表单的提交及获取参数的值，下面我们来看看用node.js + express怎么做先来构建一个表单简单模拟登录GET方式提交数据　　1.打开subform.ejs...，两个页都判断是否有这个session,如果有，显示已登录，没有则显示一个登录按钮，点此按钮，记录session 1.首先通过npm安装这个中间件，打开package.json文件，在dependencies...7.关闭浏览器，再打开查看这两个页，如第5步截图效果　　session的使用成功! 　　...示例设计思路：在上面session示例的基础上，在usecookies部分登录同时记录cookies，来自动登录 1.在上面session示例的基础上修改一下usecookies.js

2.7K7 0

hexo+github搭建博客(超级详细版，精细入微)

Hexo是一个静态博客框架，基于Node.js，将Markdown文章通过渲染引擎，生成一个静态网页，再结合Git命令（ssh），Hexo 是一个快速、简洁且高效的博客框架。...然后再themes/matery/layout/layout.ejs文件内添加下面的内容： //只在桌面版网页启用特效 var windowWidth...参考：图片预加载与图片懒加载（缓载）的区别与实现图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。...否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。...当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。

5.3K8 4

你不知道的 Blob

() 方法，从 response 对象中读取一个 Blob 对象，然后使用 createObjectURL() 方法创建一个 objectURL，然后把它赋值给 img 元素的 src 属性从而显示这张图片...下面我们来介绍如何在 HTML 中嵌入 base64 编码的图片。...在编写 HTML 网页时，对于一些简单图片，通常会选择将图片内容直接内嵌在网页中，从而减少不必要的网络请求，但是图片数据是二进制数据，该怎么嵌入呢？...([ab], { type: mimeType }); } 在转换完成后，我们就可以压缩后的图片对应的 Blob 对象封装在 FormData 对象中，然后再通过 AJAX 提交到服务器上： function...；使用 Blob 构造函数，如 new Blob([new Uint8Array(data]);，可以把 ArrayBuffer 对象转换为 Blob 对象。

4K2 0

Blob

type（只读）：一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。...() 方法，从 response 对象中读取一个 Blob 对象，然后使用 createObjectURL() 方法创建一个 objectURL，然后把它赋值给 img 元素的 src 属性从而显示这张图片...下面我们来介绍如何在 HTML 中嵌入 base64 编码的图片。...在编写 HTML 网页时，对于一些简单图片，通常会选择将图片内容直接内嵌在网页中，从而减少不必要的网络请求，但是图片数据是二进制数据，该怎么嵌入呢？...([ab], { type: mimeType }); } 在转换完成后，我们就可以压缩后的图片对应的 Blob 对象封装在 FormData 对象中，然后再通过 AJAX 提交到服务器上： function

6.1K4 0

个人博客搭建

安装Git Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。Git的作用是将本地的网页文件传到github上。...hexo new post "article title" 然后打开E:\MyBlog\source\_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件...编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到github上。...coverImg 无 v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片 password 无文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置...如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <

2.2K14 0

树莓派实现局域网内LED亮灭

--save //网络模板渲染 3. npminstall body-parser --save//网页相关数据解析此时package包内容如下： 1. { 2....基于Express的服务器逻辑app.js如下： var express = require("express"); var ejs = require('ejs'); //视图处理的模块 var...app.set('view engine', 'ejs');// app.engine('html', ejs.renderFile);// app.get('/', function(req,...bootstrapSwitch({ onText : "打开",offText : "关闭",}) 此时在局域网就可以与服务器响应了，例如我们在WIN10上模拟终端网页运行界面...,即将关闭LED"); rpio.write(12, rpio.LOW); //输出高电平，点亮LED } res.end(JSON.stringify(response));//页面显示提交状态的

1.4K3 0

前端文件下载（三）

跨域时候使用值 true XMLHttpRequest 实例关键方法：方法名说明 open() 初始化一个请求。...open(method, url, async「optional」, user「optional」, password「optional」) send() 发送一个请求。...require('path'); const fs = require('fs'); const app = new Koa(); const router = new Router(); // ejs...template app.use( views(path.join(__dirname, 'views'), { extension: 'ejs' }) ); router.get(...同时，可以设置 filename 参数指定下载文件的名称，如上示例 inline 控制内联显示。告诉浏览器在页面中直接内联现实响应体，而不是下载。一些图片，PDF 等文件的展示比较常用。

3334 0

所见即所得——HTML转图片组件开发

今天我们也来实现一个"所见即所得"的需求：将用户所见网页提取为图片。方案 1：最短步骤实现结果第一个想到的方案就是通过浏览器自带的网页另存为图片去实现。但这种方法显然是不可行的。...-- 将可保存为图片的内容通过一个标签框起来 --> <!...that.downFileToLocal(filename,that.convertBase64ToBlob(imgData)) }); }, 如此我们便实现了初步的功能当然，我们也可以设置一个预览图片来预览我们将要导出的图片...-- 将可保存为图片的内容通过一个标签框起来 --> <!...对象（文件对象） return new Blob([bytesCode], { type: imgtype }); }, // 下载 Blob 流文件 downFileToLocal

3K4 0

使用Hexo搭建个人博客的终极资料

一、前言 Hexo 是一个基于 NodeJs 博客框架，可以快速的帮我们搭建一个博客系统，Hexo使用的是Markdown（下文简称MD）解析文章的，在几秒内即可利用靓丽的主体生成静态网页。...推荐使用 Hexo 有三大理由：有大量的主题可供人们选择使用MD解析文章，MD是现在主流的文章格式可以快速的生成静态网页，对于系统性能要求低本文将包含的内容： Hexo安装后台模式启动Hexo.../stkevintan/hexo/blob/master/themes/material-flow/_config.yml Setp4：重启项目到目前为止已经完成了主题的更换，如果你是使用的nohup...如上的配置设置完之后，还差一步给文章设置了分类之后，才会显示出来。...七、使用Hexo-Admin更方便的发布文章使用Hexo快是快，但是有一个问题，就是每次发布文章都要手动发布到服务器上，并且还要进行服务器重启，是一件很麻烦的事情，那么有没有简单的方法，可以直接通过后台进行文章录入和发布呢

4522 0

使用Hexo搭建个人博客的终极资料

一、前言 Hexo 是一个基于 NodeJs 博客框架，可以快速的帮我们搭建一个博客系统，Hexo使用的是Markdown（下文简称MD）解析文章的，在几秒内即可利用靓丽的主体生成静态网页。推荐使用 Hexo 有三大理由：有大量的主题可供人们选择使用MD解析文章，MD是现在主流的文章格式可以快速的生成静态网页，对于系统性能要求低本文将包含的内容： Hexo安装.../stkevintan/hexo/blob/master/themes/material-flow/_config.yml Setp4：重启项目到目前为止已经完成了主题的更换，如果你是使用的nohup...="articleBody">替换div的所有内容为下面这段代码： <% if (page.type...评论效果如下： [670] 七、使用Hexo-Admin更方便的发布文章使用Hexo快是快，但是有一个问题，就是每次发布文章都要手动发布到服务器上，并且还要进行服务器重启，是一件很麻烦的事情，那么有没有简单的方法

6692 0

.NET Core 批量重置 Azure Blob Storage 的 mime type

我的博客使用 Azure Blob Storage 存储文章配图，结果今天玩 Azure CDN 的时候爆了，原因是图片mime type不对。...我们来看看如何在 .NET Core 里批量重置 Azure Blob Storage 中文件的mime type吧。...这个 ContentType 最终就是输出给浏览器的HTTP Header中的content-type，即Web服务器上的mime type。...于是，图片就没法显示了。我博客中的配图，以前之所以没问题，是因为没有使用CDN让客户端直接读取图片，而是通过后台处理，会自动加上正确的mime type，因此这个问题一直没暴露。...获取文件的 ContentType .NET Core 没有 MimeMapping.GetMimeMapping() 这个API，因此我们需要一个workaround。

8634 0

Hexo-Matery主题美化

找不到你想要的页面了" --- 紧接着再新建主题文件夹的 layout 目录下新建 404.ejs 文件，添加内容如下： /* don't remove...值为 true，则会作为首页推荐文章 cover false v1.0.2 版本新增，表示该文章是否需要加入到首页轮播封面中 coverImg 无 v1.0.2 版本新增，表示该文章在首页轮播封面需要显示的图片路径...，否则程序会自动截取文章的部分内容作为摘要 categories 无文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类 tags 无文章标签，一篇文章可以多个标签 reprintPolicy...如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的代码中...，会跳转到一个新的标签页，之后还需要修改 ejs 文件，文件在主题目录下的 layout 文件夹下的_partial 文件夹，修改 social-link.ejs，添加相关的配置，比如： <% if (

1.8K2 0

使用blob隐藏真实的文件路径

今天接到要求，要求把网站上的全部图片链接加密，其实方法有很多，我选择了比较简单的一种，html5的blob对象。直接看代码吧。...关于blob的细节大家可自行搜索查询首先后台返回图片的字节流，代码如下如示： protected void Page_Load(object sender, EventArgs e) {...Response.ContentType = "image/Jpg"; Response.BinaryWrite(ms.ToArray()); } 这里我是写死了一个图片地址...，大家可在网址上带上图片地址参数，这样动态获取图片地址来进行返回图片流。...); } }; xhr.send(); 这样就可以了，然后我们回到网页上，看看img标签src的地址是什么 ?

5.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在ejs网页上显示一个type blob图片？

相关·内容

hexo配置自己的博客站点

使用express框架开发，如何在ejs文件中导入外部的js、css文件

Matery之Valine评论优化

Hexo添加PWA支持

前端文件下载汇总「案例讲解」

解决 hexo 博客的图片链接失效问题

Windows环境下搭建一个Hexo博客

Nodejs学习笔记（六）--- Node.js + Express 构建网站预备知识

hexo+github搭建博客(超级详细版，精细入微)

你不知道的 Blob

Blob

个人博客搭建

树莓派实现局域网内LED亮灭

前端文件下载（三）

所见即所得——HTML转图片组件开发

使用Hexo搭建个人博客的终极资料

使用Hexo搭建个人博客的终极资料

.NET Core 批量重置 Azure Blob Storage 的 mime type

Hexo-Matery主题美化

使用blob隐藏真实的文件路径

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐