express无法在页面中无法获取本地图片的解决方法

最新推荐文章于 2024-02-04 16:06:02 发布
最新推荐文章于 2024-02-04 16:06:02 发布
阅读量1.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34393490/article/details/60884926
版权

在使用express框架搭建后台时，前端页面中img标签无法获得本地的图片，，在chrome开发者工具中发现，该图片的文件样式为text/html。因此无法获得图片。

解决方法app.use(serveStatic('public'));将一路径添加为静态文件，再将图片放入public文件夹下，就能顺利获得了

sinat_34393490
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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
Javascript——Express框架-关于图片路径的学习体会
yuni
09-14 1660
JS部分： const express=require('express'); const router=express.Router(); const multer=require('multer'); const fs=require('fs'); const upload=multer({ dest:'imgupload' }); const single=upload.single...
如何访问Express项目image文件夹下的图片
anglra的博客
02-04 442
引言 我们在自己做前后端分离的项目时，前端可以使用vue来创建前端项目，随着node.js的发展，基于node.js的express框架火了起来，我们可以通过vue+express来创建一个完整的项目，在前端项目中，我们有时需要去拿到后端的图片，怎么解决呢？ 解决方案 废话不多说，直接上解决方案 首先，请看一下express的目录 如果想通过浏览器或者前端项目访问到express中的图片，我们首先需要将你想访问的文件夹指定成静态资源，服务器才可以将他返回给前端或者浏览器，我们需要在app.js
React如何跨域访问express搭建的本地服务器
qq_40949386的博客
01-03 2244
很多时候我们需要在本地调试项目，而通过express+nodejs+mongoDB我们可以很快搭建一个本地服务器，一般在3000端口，由于React与服务器所在端口不同，所以需要进行跨域访问，在express中只需加入以下修改app.all('*', function (req, res, next) { //响应头指定了该响应的资源是否被允许与给定的origin共享。*表示所有域都可以访问，同时可
nodeJs中间件Multer详解_使用express实现本地文件/图片上传到服务器指定目录
热门推荐
蒲公英芽的博客
04-01 1万+
分两部分来讲 前端 使用jquery-form插件对表单内容进行提交 在html结构 <form id="position_add_form" name="position_form"> <input type="file" name="logo"> </form> 一是前端将图片以post方式提交到服务器 二是后端nodeJ...
初识Express并创建一个基本Web服务器及相关操作
世界和我们都不该止步于此
04-06 1476
Express是基于Node.js的一个Web开发框架，与Node内置http模块类似，用来创建Web服务器及其相关操作，也就是说Express本质就是一个包，是一个第三方的模块，为我们提供了便捷快速的方法来创建Web服务器 其实说它和http类似不如说他就是基于http模块封装出来的一个包，使用Express可以快速地创建Web网站服务器（专门对外提供Web网站资源的服务器）以及API接口服务器 一.创建基本Web服务器 1.下载包 首先我们需要在项目终端下载上这个包: npm i expre
express 获取本地文件夹下的图片和文件
weixin_34072458的博客
06-21 1795
在routes文件夹下创建了getImages.js文件，getImages.js中的代码： var express = require('express'); var router = express.Router(); var fs = require('fs'); var image = require("imageinfo"); router.get('/', f...
express中html无法加载图片,为什么我的html文件不能加载express.static？
weixin_33992214的博客
06-04 471
- simulated-selves- client- directives- Statement- statement.directive.html- lib- server- app.js- index.html我：app.use(express.static('client'));app.use(express.static('lib'));我的资产，我在加载index.html被正确加载。...
使用express官网的静态文件托管却无法正常访问，还报个 cannot Get
qq_35176319的博客
05-25 2713
在本地启动express服务，使用官网描述的静态文件托管办法： 我的文件夹结构： server.js是node启动的文件： const express = require('express'); const path = require('path'); const app = express(); app.use('/public',express.static(path.join(__dirname,'public'))); app.get('/',( req,res)=>{ res.s.
express没有匹配的路由处理（404错误处理）
黄彪博客
07-15 8983
文章参考 node使用express中对于不存在路径如何处理（404页面处理） 问题描述 在写express路由笔记的时候，突然想到，如果用户输入的地址无法匹配我定义的路径怎么处理？刚开始在网上查关于express路由不匹配的问题，怎么都找不到我 想要的结果，隔了一天，发现不就是404错误的问题吗 解决办法 const express = require("express"); const h...
email_landing_page:使用node.js构建的登录页面，该页面获取电子邮件输入并将其存储在mysql数据库中
04-20
使用express + node.js构建的登录页面，该页面获取电子邮件输入并将其存储在mysql数据库中。 要求 该Web应用程序假定您已安装MySQL，并且您的本地终端已正确配置为运行Node命令。 设置 打开本地终端，然后运行npm ...
yogurt:node express前端集成解决方案
06-07
yogurt [ˈjoɡət]已停止更新，请移步至基于 扩展针对服务端为 的前端集成解决方案。在阅读此文档之前，希望你最好对 有一定的了解。此工具主要负责前端编译与环境模拟，让你更专注、更快速地开发前端部分，关于...
nodejs-wechat:node+express调用微信JSSDK
05-16
简介最初学习Node.js，结合微信开发文档...标识该请求来源于微信通过AppID和AppSecret获取access_token有效期7200s,需要定时去刷新，但是接口还有调用限制，所以得将access_token保存在本地noncestr（随机字符串）, 有
SearchRank:用于获取特定关键字在前 N 个结果中的搜索字符串或 url 位置的应用程序
05-29
后端使用 asp.ent core 5 web api 构建解决方案并使用 iis express 启动，一旦 api 启动并运行，您可以看到下面的 swagger 页面 3、输入你要搜索的关键词，输入你选择的与关键词相关的网址，点击搜索，可以看到...
基于nodejs+express+vue+mysql的前后端分离在线订餐系统源码+sql数据库.zip
07-05
- Express中间件进行服务的配置，路由、请求的处理 - 官网 http://www.expressjs.com.cn/ - Mysql中间件处理与数据库的"通信" - Body-Parser中间件进行前端请求参数的获取 - 使用jwt对token进行加密 - multer中间件...
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
你可以在 downloadImage 方法中指定图片下载的地址，比如D盘temp文件夹
06-02
1. 在你的 Vue.js 组件中创建一个方法来处理下载图片的逻辑，代码如下： ``` methods: { downloadImage() { // 获取需要下载的元素 const element = document.getElementById('image'); // 使用 html2canvas ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值