Nginx - 使用error_page实现带有图片的自定义错误页面

news2024/11/19 9:32:23

文章目录

  • 概述
  • 官网文档
  • 需求
  • 实现

在这里插入图片描述


概述

在Nginx中,您可以使用error_page指令来指定当请求遇到特定错误时应当显示的自定义错误页面。为了实现带有图片的自定义错误页面,可以按照以下步骤操作:

  1. 创建错误页面
    首先,需要创建一个HTML文件作为错误页面。在这个文件中,可以定义需要的图片、样式和任何其他内容。例如,如果您想要在404错误页面显示一张图片,可以创建一个名为404.html的文件,并在其中使用<img>标签来引用图片。
  2. 配置Nginx
    在Nginx配置文件中(通常是nginx.conf或一个包含特定站点配置的文件),您需要添加一个server块来定义错误处理。例如:
    server {
        listen 80;
        server_name example.com;
        location / {
            # 其他正常的处理逻辑
        }
        # 错误处理
        error_page 404 /404.html;
        error_page 500 /500.html;
    }
    
    在这个例子中,当服务器收到404(未找到)或500(服务器内部错误)状态码的请求时,它会显示对应的错误页面。
  3. 确保图片可访问
    确保在错误页面中引用的图片是可访问的,并且位于正确的路径。如果图片存储在某个特定的目录下,需要确保在Nginx配置中正确地设置静态资源的路径。
  4. 测试错误页面
    在配置完成后,可以测试一下错误页面是否按预期工作。您可以通过访问一个不存在的URL(例如http://example.com/asdf)来触发404错误,并检查是否显示了自定义的404页面。

官网文档

https://nginx.org/en/docs/http/ngx_http_core_module.html#error_page

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

看看重点哈

Syntax:	error_page code ... [=[response]] uri;
Default:Context:	http, server, location, if in location
  1. 理解error_page指令:

    • error_page指令用于定义在出现特定HTTP错误时要显示的页面或重定向到的URL。它允许您自定义错误处理行为。
  2. 基本语法:

    • 简洁语法如下:
      error_page code [reason] uri;
      
    • 其中,code是HTTP错误代码,uri是要显示或重定向到的页面或URL。
    • Context: http, server, location, if in location
  3. 示例配置:

    • 简单示例,将404错误重定向到自定义404页面:
      error_page 404 /404.html;
      
    • 如果要指定外部URL,可以这样写:
      error_page 500 http://example.com/error500.html;
      
  4. 多个错误处理:

    • 可以为多个错误代码指定相同的处理方式,例如:
      error_page 404 /404.html;
      error_page 500 502 503 504 /5xx.html;
      
  5. 全局错误处理:

    • http块中定义的error_page指令可用于处理所有虚拟主机的错误。

需求

实现一个自定义错误页面,页面中有个图片展示

实现

大致结构如下

server {
    listen 80;
    server_name your_domain.com;

    error_page 404 /error/custom_404.html;
    location = /custom_404.html {
        alias  /path/to/your/site; 
    }

    # 其他配置...
}


真实案例如下 :

开启自定义页面

在这里插入图片描述


同时配置 /errorlocation

转发到 /error/xxxx , 故下面需要配置个location

在这里插入图片描述

注意alias


将图片资源和静态HTML置于 Nginx的 html目录下

在这里插入图片描述

静态页面 (demo)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div align="center">
			<img src="error/404.png">
		</div>
	</body>
</html>

注意 error/404.png

在这里插入图片描述


效果如下

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1351765.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

three.js 多通道组合

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div style"border: 1px so…

计算机毕业论文内容参考|基于区块链技术的电子健康记录系统的设计与实现

文章目录 摘要前言绪论课题背景国内外相关研究课题内容区块链技术介绍系统分析用户需求分析系统设计系统实现系统测试总结与展望摘要 本文介绍了基于区块链技术的电子健康记录系统的设计与实现。该系统旨在解决传统电子健康记录系统存在的数据安全性、数据隐私性和数据互操作性…

HTML5和JS实现明媚月色效果

HTML5和JS实现明媚月色效果 先给出效果图&#xff1a; 源码如下&#xff1a; <!DOCTYPE html> <html> <head><title>明媚月光效果</title><style>body {margin: 0;overflow: hidden;background-color: #000; /* 添加一个深色背景以便看到…

新全国产迅为龙芯 3A6000 处理器板卡

11月28日&#xff0c;“2023龙芯产品发布暨用户大会”在北京举行&#xff0c;迅为作为龙芯重要合作伙伴受邀参加&#xff0c;在整机产品发布仪式上&#xff0c;展示了基于龙芯 3A6000 处理器的全国产安全型工控计算机。 龙芯 3A6000 处理器完全自主设计、性能优异&#xff0c;代…

《MySQL系列-InnoDB引擎02》InnoDB存储引擎介绍

文章目录 第二章 InnoDB存储引擎1 InnoDB存储引擎概述2 InnoDB存储引擎的版本3 InnoDB体系架构3.1 后台线程3.2 内存 4 Checkpoint技术5 Master Thread 工作方式5.1 InnoDB 1.0.x版本之前的Master Thread5.2 InnoDB 1.2.x版本之前的Master Thread5.3 InnoDB 1.2.x版本的Master …

Vue实现JSON字符串格式化编辑器组件

相信很多同学都用过网上的在线JSON格式化工具来将杂乱的JSON数据转换成易于我们阅读和编辑的格式。那么&#xff0c;你有没有想过自己动手实现一个这样的工具呢&#xff1f;今天&#xff0c;我将介绍如何使用Vue.js来构建一个简单的JSON格式化工具。 功能简述 支持格式化JSON字…

企业如何利用好数据,让数据真正成为数据资产?数据资产管理应该怎样建设?

数字化时代&#xff0c;数据已经成为了个人、机构、企业乃至国家的重要战略资产。 近日&#xff0c;财政部正式对外发布《企业数据资源相关会计处理暂行规定》&#xff0c;并自 2024 年 1 月 1 日开始施行。数据资产入表政策落地节奏超预期&#xff0c;标志着国家把数据作为生…

jstree高性能树型控件

一、直接上代码 这种基于服务器端生成Html结构&#xff0c;直接渲染为树&#xff0c;能很好的解决大树的问题。 {ViewData["Title"] "Home Page";Layout null; } <link href"~/jstree/themes/default/style.min.css" rel"stylesheet…

STM32CubeMX教程17 DAC - 输出三角波/噪声波

目录 1、准备材料 2、实验目标 3、实验流程 3.0、前提知识 3.1、CubeMX相关配置 3.1.1、时钟树配置 3.1.2、外设参数配置 3.1.3、外设中断配置 3.2、生成代码 3.2.1、外设初始化调用流程 3.2.2、外设中断调用流程 3.2.3、添加其他必要代码 4、常用函数 5、烧录验…

浪涌保护器的必要性和安装方案

浪涌保护器SPD是一种用于限制电力线路或信号线路上的瞬时过电压&#xff0c;并将其导入地线的装置&#xff0c;主要用于防止雷电或其他电源干扰对电气设备或电子设备造成损坏。浪涌保护器的类型和结构根据不同的用途和场合有所不同&#xff0c;但一般都包含一个或多个非线性电压…

后台管理系统 -- 点击导航栏菜单对应的面包屑和标签(Tag)的动态编辑功能

相信很多时候,面包屑和标签(Tag)的功能几乎是后台管理系统标配。 就是会随着路由的跳转来进行相应的动态更新。 我先展示一下效果: 1.面包屑 先说一下思路&#xff1a; 我们导航菜单点击之后,将当前显示路由对象存储到Vuex的storge里面,然后在面包屑组件里面,读取这个状态即可…

电子负载是如何实现这些功能的

电子负载模拟真实负载的电子设备&#xff0c;它可以吸收或释放电能&#xff0c;以实现对电源、电池、发电机等电源设备的测试和保护。电子负载的主要功能包括恒流、恒压、恒功率、恒电阻等模式&#xff0c;以及过压、过流、短路、过热等保护功能。那么&#xff0c;电子负载是如…

RAL论文:一种自感知扭转塔折纸软体机器人

折纸是一种以纸张折成各种不同形状的艺术活动。折纸与自然科学结合在一起&#xff0c;不仅成为建筑学院的教具&#xff0c;还发展出了折纸几何学成为现代几何学的一个分支。根据折痕的不同分布&#xff0c;可以将纸张折叠成不同的形状&#xff0c;例如有许多经典的折纸结构&…

东信免驱系列身份证阅读器串口通讯协议解析示例,适用于单片机、ARM等系统开发集成使用

完整的一次读卡流程包括&#xff1a; 身份证寻卡 > 身份证选卡 > 身份证读卡&#xff0c;三个步骤 缺一不可&#xff08;见通讯协议&#xff09;。 寻卡&#xff1a;EA EB EC ED 04 00 B0 B4 BB 返回&#xff1a;EA EB EC ED 05 00 00 B0 B5 BB 选卡&#xff1a;EA …

【EI会议征稿通知】2024年第四届数字信号与计算机通信国际学术会议(DSCC 2024)

2024年第四届数字信号与计算机通信国际学术会议&#xff08;DSCC 2024&#xff09; 2024 4th International Conference on Digital Signal and Computer Communications 第四届数字信号与计算机通信国际会议(DSCC 2024)将于2024年4月12日至14日在中国-香港举行。DSCC 2024旨…

Java8新特性 Stream流详解

目录 1、介绍 2、获取Stream流的两种方式 方式一&#xff1a;根据Collection获取流 方式二&#xff1a;Stream中的静态方法of获取流 区别 3、Stream流注意事项 4、Stream流的常用方法 forEach count filter limit skip map sorted distinct match find max和…

【JAVA核心知识】分布式事务框架Seata

Seata 基本信息 GitHub&#xff1a;https://github.com/seata/seatastars: 20.6k 最新版本&#xff1a; v1.6.1 Dec 22, 2022 官方文档&#xff1a;http://seata.io/zh-cn/index.html 注意 官方仅仅支持同步调用。 官方在FAQ中表示对于异步框架需要自行支持。 具体的扩展思…

学习Go语言Web框架Gee总结--上下文Context(二)

学习Go语言Web框架Gee总结--上下文Context context/go.modcontext/main.gocontext/gee/context.gocontext/gee/router.gocontext/gee/gee.go 学习网站来源&#xff1a;Gee 项目目录结构&#xff1a; context/go.mod module examplego 1.21.5require gee v0.0.0 replace gee…

python设计模式:模板方法模式

更多Python学习内容&#xff1a;ipengtao.com 软件设计和编程中&#xff0c;设计模式是一种有助于解决常见问题的强大工具。其中之一是"模板方法模式"&#xff0c;它是一种行为型设计模式&#xff0c;允许你定义一个算法的骨架&#xff0c;但将一些步骤的具体实现延迟…

【elfboard linux开发板】7.i2C工具应用与aht20温湿度寄存器读取

1. I2C工具查看aht20的温湿度寄存器值 1.1 原理图 传感器通过IIC方式进行通信&#xff0c;连接的为IIC1总线&#xff0c;且设备地址为0x38&#xff0c;实际上通过后续iic工具查询&#xff0c;这个设备是挂载在iic-0上 1.2 I2C工具 通过i2c工具可以实现查询i2c总线、以及上面…