如何访问Express项目image文件夹下的图片

已于 2024-02-04 16:10:15 修改
阅读量692 收藏 1
点赞数 3
文章标签： express
于 2024-02-04 16:06:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anglra/article/details/136027643
版权

引言

我们在自己做前后端分离的项目时，前端可以使用vue来创建前端项目，随着node.js的发展，基于node.js的express框架火了起来，我们可以通过vue+express来创建一个完整的项目，在前端项目中，我们有时需要去拿到后端的图片，怎么解决呢？

解决方案

废话不多说，直接上解决方案

首先，请看一下express的目录

如果想通过浏览器或者前端项目访问到express中的图片，我们首先需要将你想访问的文件夹指定成静态资源，服务器才可以将他返回给前端或者浏览器，我们需要在app.js中添加如下代码

app.use(express.static(path.join(__dirname, 'public')));

将我们的public文件夹指定为静态资源，并且指定为根目录，然后我们就可以通过浏览器去访问imgs文件夹中的图片了。 注意！！！！！！！！，因为public指定为了根目录，所以我们浏览器中的地址，只需要写localhost:3000/imgs/test1.png就可以访问到了,我这里启动的默认端口是3000，大家可以根据自己的设置去更改

如果想在vue项目中去展示图片，首先需要解决一下跨域问题，然后将路径赋值给图片的src就可以显示了！ 

是罐装可乐
关注
express 获取本地文件夹下的图片和文件
weixin_34072458的博客
06-21 1843
在routes文件夹下创建了getImages.js文件，getImages.js中的代码： var express = require('express'); var router = express.Router(); var fs = require('fs'); var image = require("imageinfo"); router.get('/', f...
nodejs+express+mysql创建简单项目后台
最新发布
qq_41051239的博客
09-12 818
打开migrations文件夹，里面有一个由当前时间，加上create-user命名的文件，这个文件就是迁移文件。作用是用来创建、修改表的。这张表里记录了当前已经跑过了哪些迁移，这样当再次运行sequelize db:migrate时，已经运行过的迁移文件，就不会重复再次执行了。在项目根目录新建docker-compose.yml文件，名称是固定的，然后将下面的配置复制进去，这就是MySQL的一个简单配置。之后的其他接口创建流程和前面所述的一样，就不再多做赘述，至此一个简单项目的后台就创建完成。
express上传照片，查看照片
10-24
Express 高度包容、快速而极简的Node.js Web 框架简单实现上传照片，查看照片的Demo。
vue项目打包后出现图片引用路径错误的问题
weixin_45016440的博客
08-10 572
根据‘build/webpack.base.conf.js’与‘config/index.js’对应关系，可知大于10000B的图片被打包到了‘static/img’目录，所以引用路径就变成了‘static/img/+文件名’。修改‘config/index.js’下assetsPublicPath的‘/’为‘./’，在‘build/utils.js’中ExtractTextPlugin.extract下添加‘publicPath: '../../'’
node express中使用static托管静态文件（访问项目中的图片或者文件）
开心大表哥
12-28 1万+
利用 Express 托管静态文件 通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等。 将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如，假设在 public 目录放置了图片、CSS 和 JavaScript 文件，你就可以在app.js中设置：app
express接受图片
weixin_30520015的博客
06-06 787
1 2 3 4 5 6 npm i multiparty --save 文档地址 https://github.com/expressjs/node-multiparty npm i images --save 文档地址 https://github.com/aheckmann/...
Mock数据二 利用 Express 托管静态文件，使前端可以正常访问图片，网页等文件
AfinalStone的专栏
04-11 776
原文地址：http://www.expressjs.com.cn/starter/static-files.html 为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，请使用 Express 中的 express.static 内置中间件函数。 此函数特征如下： express.static(root, [options]) The root argument spec...
实战：Express+Mysql开发图书管理系统-图片静态资源
01-18
这可以通过`app.use(express.static('public'))`实现，假设我们的图片存储在`public/images`目录下。 对于图书管理，我们需要创建数据模型和数据库连接。使用`mysql2`库连接到MySQL数据库，建立数据表，例如`books`...
NodeJS全栈开发一个功能完善的Express项目（附完整源码）
热门推荐
qq_15041931的博客
06-24 1万+
Node.js对前端来说无疑具有里程碑意义，与其越来越流行的今天，掌握 Node.js 技术已经不仅仅是加分项，而是前端攻城师们必须要掌握的一项技能。而 Express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架，成为 Node.js 最流行的框架，所以使用 Express 进行 web 服务端的开发是个不错且可信赖的选择。但是 Express 初始化后，并不马上就是一个开箱即用，各种功能完善的 web 服务端项目，例如：MySQL 连接、jwt-token 认证、md5 加密、中间件
docker-baseimage-node14-esm-express：tsantananode14-esm-express
02-08
cd进入docker-baseimage-node14-esm-express克隆文件夹 docker build -t node14-esm-express。 运行并测试图像 泊坞窗运行-it -p 38080：8080 node14-esm-express curl -X GET 或通过http://localhost:38080/check...
express-image:Express 的图像服务中间件
07-05
表达形象 快速中间件可帮助您调整图像大小 安装 npm i express-image 例子 var express = require ( 'express' ) ; var image = require ( 'express-image' ) ; var app = express ( ) ; app . use ( '/imgs' , image ( __dirname ) ) ; app . listen ( 3000 ) ; 现在您可以请求 localhost 获取调整大小的图像 http://localhost:3000/imgs/sample.jpg?w=40将图像调整为 40px 的宽度，同时保持纵横比 http://localhost:3000/imgs/sample.jpg?h=40在保持纵横比的同时将图像调整为 40px 的高度 http://localhost
express 表单上传图片
08-06
后台服务器是express,通过表单上传图片
详解nodejs实现本地上传图片并预览功能（express4.0+）
01-21
Express为：4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下，通过取图片路径进行图片预览 写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过ajax方式上传文件，使用FormData进行ajax请求  ，nodejs端采用multiparty模块 相关查看文档： 通过Ajax方式上传文件，使用FormData进行Ajax请求 node-multiparty github F
nodejs读取图片返回给浏览器显示
10-16
主要为大家详细介绍了nodejs读取图片返回给浏览器显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
express 图片资源上传处理
qq_27314517的博客
03-03 246
可以使用第三方中间件来处理。
express 接收照片
weixin_30954607的博客
03-27 688
前台 ajajx 可以参考我的 博客中 formdata 传数据 后台 npm i multiparty --save 文档地址 https://github.com/expressjs/node-multiparty npm i images --save 文档地址 https://github.com/aheckman...
NodeJs实战-Express构建照片存储网站(2)-上传、展示文件
modelmd的博客
11-24 1484
NodeJs实战-Express构建照片存储网站(2)-上传、展示文件
NODE【一】使用node.js写个本地服务器，提供前端访问图片的路径
小祥编程擅长前端
11-13 1640
NODE【一】使用node.js写个本地服务器，提供前端访问图片的路径，前端学完node.js没有什么可入手的小项目，或者想练习一下，那么自己写一个本地服务器，使用node+express技术给前端访问图片提供一个接口，意义还是挺重大的。
vue上传图片到项目目录下
06-08
要在Vue中上传图片到项目目录下，你需要使用一个后端服务（如Node.js）来实现文件上传功能。以下是一个简单的实现步骤： 1. 在Vue组件中创建一个文件上传表单，例如： ``` <template> <div> <form @submit.prevent="uploadFile"> <input type="file" ref="fileInput" accept="image/*"> <button type="submit">上传</button> </form> </div> </template> ``` 2. 在Vue组件中编写一个方法来处理上传文件的逻辑，例如： ``` <script> import axios from 'axios'; export default { methods: { async uploadFile() { const file = this.$refs.fileInput.files[0]; const formData = new FormData(); formData.append('file', file); try { const response = await axios.post('/api/upload', formData); console.log(response.data); } catch (error) { console.error(error); } }, }, }; </script> ``` 3. 在后端服务中创建一个路由来处理文件上传请求，例如： ``` const express = require('express'); const multer = require('multer'); const path = require('path'); const app = express(); const upload = multer({ dest: path.join(__dirname, 'uploads'), }); app.post('/api/upload', upload.single('file'), (req, res) => { res.json({ filename: req.file.filename, path: req.file.path, }); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 在这个例子中，文件将上传到服务器上的`uploads`文件夹中。你可以根据你的需求更改上传路径和文件名。注意，这个例子只是一个简单的示例，你可能需要添加更多的逻辑来确保文件上传的安全性和可靠性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值