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

最新推荐文章于 2024-02-04 16:06:02 发布

sinat_34393490

最新推荐文章于 2024-02-04 16:06:02 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sinat_34393490/article/details/60884926

本文介绍了解决Express框架中前端页面img标签无法加载本地图片的问题。通过设置app.use(serveStatic('public'))，将指定路径设置为静态文件夹，并将图片放入public文件夹下，从而实现图片的正常加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sinat_34393490

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Javascript——Express框架-关于图片路径的学习体会

yuni

09-14

1736

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 获取本地文件夹下的图片和文件

weixin_34072458的博客

06-21

1889

在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

556

- 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+ejs 渲染 public 里面的图片失败

daishaochen的博客

03-14

382

express+ejs 渲染 public 里面的图片失败

node.js框架Express的路径问题

weixin_44806635的博客

09-12

585

node.js框架Express（一） var express =require('express') //1、创建app： var app=express() //当以/public/开头的时候，去 ./public/目录中找找对应的资源； //这种方式更容易辨识，推荐这种方式 //app.use('./public/',express.static('./public/')) //必须是/a/public目录中的资源具体路径： //app.use('/a/',express.static('./pub

node之本地服务器图片上传的方法示例

10-17

Node.js 本地服务器图片上传的方法主要涉及前后端分离的开发模式，使用Node.js作为服务端，实现图片上传功能，并处理文件命名、存储路径、文件大小限制等关键问题。通过阅读提供的文档内容，我们可以了解到使用了...

访问node express中的static静态文件方法

Tang__CT的博客

04-15

817

访问node express中的static静态文件方法应用场合在项目中需要使用到node express框架进行中间件开发、使用express托管静态文件或开放其它静态文件解决方法通过express内置的express.static方法可以方便地托管静态文件，例如图片、CSS、JavaScript文件等将静态资源文件所在目录作为参数传递给express.static中间件就可以提供静态资源文件的访问示例 express框架下运行以下代码 #注意格式 app.use('/publi

email_landing_page:使用node.js构建的登录页面，该页面获取电子邮件输入并将其存储在mysql数据库中

04-20

使用express + node.js构建的登录页面，该页面获取电子邮件输入并将其存储在mysql数据库中。要求该Web应用程序假定您已安装MySQL，并且您的本地终端已正确配置为运行Node命令。设置打开本地终端，然后运行npm ...

weather-app:一个基于Express和React构建的简单天气应用，可显示本地天气信息

03-28

在weather-app中，前端可能通过发送Ajax请求（通常使用fetch API或axios库）与后端Express服务器通信。后端收到请求后，获取天气数据并返回给前端。这种前后端分离的架构提高了应用的灵活性和可扩展性。 **7. 数据...

express-locallibrary-tutorial:用Express（节点）编写的本地图书馆网站

04-27

Express的中间件机制允许在请求处理链中插入功能。例如，我们可以使用`body-parser`中间件解析POST请求的体数据，或者使用`morgan`中间件记录HTTP请求日志。 **七、用户认证与授权** 对于一个图书馆网站，可能需要...

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框架

weixin_44999716的博客

01-16

488

title: Express框架 date: 2022-01-16 09:51:18 tags: Express框架 express是一个基于内置核心http模块的一个第三方的包，专注于web服务器的构建。 //在项目文件夹express路径cmd之后， //初始化项目 yarn init -y //安装express yarn add express 使用express搭建一个简单的服务器 app.js //1.引入express const express = require("express").

node学习(二) —— express框架（url路由和错误404自定义）

wangshang1320的博客

01-08

2959

1.根据url 进行不同的操作 (路由和读文件，都图片) const express = require('express'); const app = express(); const fs = require('fs'); const path = require('path'); //设置静态路径为当前路径 app.use(express.static(path.join(_...

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

最新发布

anglra的博客

02-04

931

引言我们在自己做前后端分离的项目时，前端可以使用vue来创建前端项目，随着node.js的发展，基于node.js的express框架火了起来，我们可以通过vue+express来创建一个完整的项目，在前端项目中，我们有时需要去拿到后端的图片，怎么解决呢？解决方案废话不多说，直接上解决方案首先，请看一下express的目录如果想通过浏览器或者前端项目访问到express中的图片，我们首先需要将你想访问的文件夹指定成静态资源，服务器才可以将他返回给前端或者浏览器，我们需要在app.js

使用express官网的静态文件托管却无法正常访问，还报个 cannot Get

qq_35176319的博客

05-25

3400

在本地启动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

9739

文章参考 node使用express中对于不存在路径如何处理（404页面处理）问题描述在写express路由笔记的时候，突然想到，如果用户输入的地址无法匹配我定义的路径怎么处理？刚开始在网上查关于express路由不匹配的问题，怎么都找不到我想要的结果，隔了一天，发现不就是404错误的问题吗解决办法 const express = require("express"); const h...

跨域问题

sjzwenzi的专栏

10-22

536

1、跨域问题 app.all('*', function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

express用fs读取静态文件路径错误的解决方案

m0_66809099的博客

10-23

421

今天用在用express生成器生成express框架的时候.想把一个文件的信息传给前端,用fs去读取然后定义一个变量去获取fs读取的文件通过res.send()送给前端.但是文件路径出现了失误一直读取不出来.错误示例,本来不管是引入css或js都是直接以静态资源public文件为起点,直接写其下的路径.但是引入fs写这样的文件就读取不到了.个人猜测fs的读取相对路径的读取的方法应该是以你读取的文件为起点来引入被读取文件的路径.当我把路径改为'./public/maoyan.txt'才成功了。

实现本地图片在Web端展示的服务端demo

为了解决这个问题，开发者可以使用服务端程序来获取本地图片，并通过web服务以正确的路径将图片返回给客户端，确保图片能够被正确显示。下面将详细介绍如何实现这样一个显示本地图片的服务端demo。首先，我们要...