在Express中提供静态文件的实现方法

为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，请使用 Express 中的 express.static 内置中间件函数。

将包含静态资源的目录的名称传递给 express.static 中间件函数，以便开始直接提供这些文件。例如，使用以下代码在名为 public 的目录中提供图像、CSS 文件和 JavaScript 文件：

app.use(express.static('public'));

现在，可以访问位于 public 目录中的文件：

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

Express 相对于静态目录查找文件，因此静态目录的名称不是此 URL 的一部分。

要使用多个静态资源目录，请多次调用 express.static 中间件函数：

app.use(express.static('public'));
app.use(express.static('files'));

Express 以您使用 express.static 中间件函数设置静态目录的顺序来查找文件。

要为 express.static 函数提供的文件创建虚拟路径前缀（路径并不实际存在于文件系统中），请为静态目录指定安装路径，如下所示：

app.use('/static', express.static('public'));

现在，可以访问具有 /static 路径前缀的 public 目录中的文件。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

然而，向 express.static 函数提供的路径相对于您在其中启动 node 进程的目录。如果从另一个目录运行 Express 应用程序，那么对于提供资源的目录使用绝对路径会更安全：

app.use('/static', express.static(__dirname + '/public'));

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解利用 Express 托管静态文件的方法

    通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片.CSS.JavaScript 文件等. 将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了.例如,假设在 public 目录放置了图片.CSS 和 JavaScript 文件,你就可以: app.use(express.static('public')); 现在,public 目录下面的文件就可以访问了. http://localhost:3000

  • Express之托管静态文件的方法

    中间件express.static 我们使用express初始化一个目录的时候,会在app.js中看到一大推的app.use. 其中一个主要的中间件是express.static(4.0版本依旧保留的中间件) var express = require('express'); var app = express(); app.use('/static',express.static('public')); 通过express.static可以帮助我们托管静态文件,js,css,img等. exp

  • 在Express中提供静态文件的实现方法

    为了提供诸如图像.CSS 文件和 JavaScript 文件之类的静态文件,请使用 Express 中的 express.static 内置中间件函数. 将包含静态资源的目录的名称传递给 express.static 中间件函数,以便开始直接提供这些文件.例如,使用以下代码在名为 public 的目录中提供图像.CSS 文件和 JavaScript 文件: app.use(express.static('public')); 现在,可以访问位于 public 目录中的文件: http://loc

  • Flask中提供静态文件的实例讲解

    1.可以使用send_from_directory从目录发送文件,这在某些情况下非常方便. from flask import Flask, request, send_from_directory # set the project root directory as the static folder, you can set others. app = Flask(__name__, static_url_path='') @app.route('/js/<path:path>') de

  • 用Node提供静态文件服务的方法

    用Node提供静态文件服务的方法

    前言 对于一个web应用,提供静态文件(CSS.JavaScript.图片)服务常常是必须的.本文将介绍如何做一个自己的静态文件服务器. 创建一个静态文件服务器 每个静态文件服务器都有个根目录,也就是提供文件服务的基础目录.所以我们要在即将创建的服务器上定义一个root变量,它将作为我们这个静态文件服务器的根目录: var http = require('http') var join = require('path').join var fs = require('fs') var root

  • python flask中静态文件的管理方法

    Web应用中大多会提供静态文件服务以便给用户更好的访问体验. 静态文件主要包含CSS样式文件,js脚本,图片和字体等. Flask也支持静态文件访问的,默认情况下只需在项目根目录下,创建名为static的目录,在应用中使用'/static'开头的路径就可以访问了.但是为了获得更好的处理能力,推荐使用Nginx 或者其他服务器管理静态文件. 不要直接在模板中写死静态文件路径,应该使用url_for生成路径. 例如: url_for('static',filename='style.css') 生成

  • 对Django中static(静态)文件详解以及{% static %}标签的使用方法

    在一个网页中,不仅仅只有一个html骨架,还需要css样式文件,js执行文件以及一些图片等.因此在DTL中加载静态文件是一个必须要解决的问题.在DTL中,使用static标签来加载静态文件.要使用static标签,首先需要{% load static %}. 加载静态文件的步骤如下: 首先确保django.contrib.staticfiles已经添加到settings.INSTALLED_APPS中. 确保在settings.py中设置了STATIC_URL. 注意: 上面两条都是在创建Dja

  • ASP.NET Core 应用程序中的静态文件中间件的实现

    在这篇文章中,我将向大家介绍,如何使用中间件组件来处理静态文件.这篇文章中,我们讨论下面几个问题: 在ASP.NET Core中,我们需要把静态文件存放在哪里? 在ASP.NET Core中 wwwroot文件夹是啥? 怎样在ASP.NET Core应用程序中,配置静态文件中间件? UseFileServer中间件的作用是什么? 最重要的特性之一就是;几乎所有的web应用程序都应该具备直接从文件系统存取静态文件的能力.ASP.NET Core能够直接从客户端获取应用程序的静态文件,比如:HTML

  • ASP.NET Core中的静态文件

    ASP.NET Core中的静态文件

    目录 1.前言 2.设置静态文件目录 2.1 设置默认静态文件目录 2.2 设置访问Web根目录外的文件 3.设置HTTP响应标头 4.静态文件授权 5.启用目录浏览 6.设置静态文件默认文档 6.1设置默认文档 6.2更改默认文档名称 7.UseFileServer 1.前言 当我们创建Core项目的时候,Web根目录下会有个wwwroot文件目录,wwwroot文件目录里面默认有HTML.CSS.IMG.JavaScript等文件,而这些文件都是Core提供给客户端使用的静态文件.但是这些静

  • vue在index.html中引入静态文件不生效问题及解决方法

    本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html) 出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的stat

  • 如何在Django项目中引入静态文件

    今天继续学习Django,今天主要掌握两个小点 一.如果为Django项目中引入静态文件 1.先要在project目录下创建static的目录,然后将jquery文件拷贝这个目录下就可以了 2.在project的settings文件中静态文件的路径,注意,这里的逗号千万不可省略,不然Django会报错的 3.在html文件就可以引入这个jquery文件了 二.下面我们学习下如何前台提交数据到后台 1.先在html文件中写一个form表单,用来提交数据,我们就提交db这个url中,用post的方式

  • django配置app中的静态文件步骤

    配置静态文件的两种方式: 1 配置单独app下的静态文件,比如某个app下的单独的图片. 2 配置整个project下的静态文件,适用于那些和单独app关联不大的文件,比如jquery bootstrap 等等 配置步骤: 首先,我们需要确认在settings.py文件中的INSTALLED_APPS变量中存在 django.contrib.staticfiles INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth',

随机推荐