NodeJS解析前端请求图片链接，将服务器目录下的图片返回给前端用于页面展示

最新推荐文章于 2024-04-22 15:13:44 发布
最新推荐文章于 2024-04-22 15:13:44 发布
阅读量5.1k 收藏 25
点赞数 6
分类专栏： node.js后端 文章标签： html5 前端 node.js 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43334673/article/details/109895654
版权

背景：在开发项目阶段，前端、后端都在本人电脑上，目前前端需要一些图片展示，本可以直接把这些图片放在前端目录的静态文件中，但为了更真实模拟数据，想实现从前端发起请求图片链接，然后在后端返回图片数据用于展示。

1.前端

下面是我模拟前端发起的图片链接，使用get请求：

http://localhost:4200/getImg?sort=coffee&img=coffee0001.jpg

解释：服务器中有个接口为'/getImg'，后面是get请求的query参数，使用了两个查询参数。第一个参数sort是分类，因为我的图片有不同的类型，不同类型的图片放在不同的文件夹中；第二个参数是图片存放在服务器下的名称，即获取在coffee文件夹中coffee0001.jpg图片。

前端用于测试的HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"
最低0.47元/天 解锁文章
鸭绒
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
nodejs读取图片返回给浏览器显示
01-01
本文主要是使用nodejs处理图片等资源返回给浏览器显示方法，但不只限制于图片，也可以是音频视频等其他非字符串文件的返回和显示。也可以扩展成nodejs静态资源服务器的开发方法。 请求头说明 在http响应里面有几个重要的东西，Content-Type 说明文件渲染MIME类型,这是我们本文的相关处理关键。 常用的MIME类型 { css: text/css, gif: image/gif, html: text/html, ico: image/x-icon, jpeg: image/jpeg, jpg: image/jpeg,
nodejs 读取目录下的图片并以json返回
08-21
nodejs 读取目录下的图片并以json返回
nodejs写接口实现图片上传回显(三)
Summer_Uncle的博客
01-25 622
(1)页面用formData上传图片文件(2)接口配置multer中间件,解析存储图片文件(3)接口返回图片地址,回显。
前端通过http请求访问本地图片
最新发布
dxjren的博客
04-22 669
前端通过http请求访问本地图片
7 —— node —— 响应图片
weixin_30457551的博客
05-27 159
const http = require('http'); const fs = require('fs'); const server = http.createServer(); server.on('request', function (req, res) { 　　// 根据每次请求的文件类型给予相应的响应 　　var urls...
node.js写后端接口返回图片
neversleepy的博客
02-21 3969
node.js写后端接口返回图片node.js写后端接口返回图片文件结构tools/pathProcessing.js(路径处理函数)router/img/swiper.js（图片接口）postman测试结果 node.js写后端接口返回图片 其实这个跟之前那篇差不多，我采用的是数据库存图片相对路径，接口返回图片的绝对路径（用的__dirname) 文件结构 tools/pathProcessing.js(路径处理函数) 因为写的是前后端分离，如果直接返回相对路径前端拿到相对路径就去前端的文件夹那里去找了
Node.js图片文件请求浏览
成长ing中的w的专栏
12-10 1776
本篇文章介绍如何搭建图片文件服务器，用户可以在浏览器请求访问浏览该图片。 /** * 图片服务器搭建 */ //载入http模块 const http = require("http"); //载入fs模块 const fs = require("fs"); //载入path模块 const path = require("path"); //载入url模块 const url = require("url"); //载入zlib模块 const zlib = require("zlib");
Web前端 nodejs
08-30
Web前端开发是构建互联网应用程序的重要组成部分，而Node.js作为一个基于Chrome V8引擎的JavaScript运行环境，为前端开发者提供了在服务器端编写代码的能力。本主题主要关注Node.js在Web开发中的应用，特别是关于...
manga-nodejs
06-09
3. **数据库接口（Database Interface）**：可能使用MongoDB或MySQL等数据库存储漫画信息，如作者、章节、图片链接等。 4. **API（Application Programming Interface）**：对外提供服务的接口，可能是RESTful API，...
Node.js-一个使用node将word转成html的小工具
08-09
在这个项目中，Koa 用来处理HTTP请求，如文件上传和返回HTML链接。 3. **文件上传处理**: 在Node.js中，可以使用内置的`fs`（文件系统）模块来处理文件操作，包括读取、写入和删除文件。对于文件上传，通常会借助第...
crawler:nodejs的爬虫
05-29
JavaScript是一种轻量级的、解释型的编程语言，常用于前端开发，但在Node.js中，它也能用于服务器端编程，包括爬虫的编写。 要开始构建Node.js爬虫，我们需要以下几个核心模块： 1. **http/https**：这两个内置...
yor:基于 NodeJs 的社交媒体应用
05-30
标签如`<form>`用于创建表单，`<input>`定义输入字段，`<button>`创建按钮，而`<div>`用于组合元素，`<a>`则用于创建链接。 **4. 社交媒体功能** yor可能提供的功能包括： - **用户注册与登录**：用户可以创建...
nodejs返回带图片的HTML页面,Nodejs实现简单的网页图片获取
weixin_33618737的博客
06-04 622
利用node实现爬虫这里用到了三个主要模块，其中https,fs是内置模块可以直接引入，cheerio是第三方模块需要npm install cheerio --save 安装后使用。这里我介绍一个三个模块的相应用法首先是https模块，顾名思义是用于获取https协议网址的相关内容所需要用到的模块，其中包含get,post两中方法，在获取数据时也有所不同，我使用的是get方法，https.get...
前端获取后台图片并展示
weixin_45641100的博客
03-14 5714
方式1：可以采用云数据进行存储图片，数据库只存储url。 方式2：将图片放在项目中的img文件里，数据库存储img的相对路径。 不建议直接往数据库里存图片。
图片文件在前端展示形式
yangyanqin2545的博客
06-14 878
图片文件在前端展示形式
nodejs服务器读取图片返回给前端（浏览器）显示
weixin_30588907的博客
02-27 1348
1前言 项目需要用nodejs服务器给前端传递图片，网上找了好多资料，多数都是怎么在前端上传图片的，然后通过看runoob.com菜鸟教程，发现其实是非常简单，用express框架就行了。 2代码 2.1 用原生的版本（包含了返回网页功能） var http = require('http'); var fs = require('fs'); var url = re...
node服务器端接收前端上传图片并返回url路径保存数据库
zhuqiang1997的博客
05-06 3796
通过npm安装multer插件https://www.npmjs.com/package/multer 首先先在node启动js文件中注册express.static中间件 通过express.router将方法导出，在node启动js文件中注册 const express = require('express'); const router = express.Router(); const multer = require("multer"); const key = require('..
nodejs解析post请求参数
04-14
在Node.js中，可以使用中间件body-parser来解析POST请求参数。具体代码如下： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值