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

文章目录

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

在这里插入图片描述


概述

在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.hqwc.cn/news/316333.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每天刷两道题——第三天

1.1两两交换链表中的节点 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09; 输入&#xff1a;[1,2,3,4] 输出&#xff1a;[2,1,4,3…

‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。这个问题如何解决?

这个错误信息 vue-cli-service 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件 表示 vue-cli-service 命令在你的系统上未被识别。这通常是因为 Vue CLI 没有被正确安装或其路径没有被加入到系统的环境变量中。以下是几个解决这个问题的步骤&#xff1a; 确认 …

Oracle 日志路径查询介绍

数据库日志分析详解&#xff1a;  ORACEL RAC 体系架构分析  Oracle RAC 包含GI(Grid Infrastructure) 集群软件与Oracle数据库组成。  GI包含两个最主要的组件&#xff1a;Clusterware集群软件和ASM存储软件&#xff0c;这两个软件提供数据库高可用能力。  …

自然语言处理24-T5模型的介绍与训练过程,利用简单构造数据训练微调该模型,体验整个过程

大家好,我是微学AI,今天给大家介绍一下自然语言处理24-T5模型的介绍与训练过程,利用简单构造数据训练微调该模型,体验整个过程。在大模型ChatGPT发布之前,NLP领域是BERT,T5模型为主导,T5(Text-to-Text Transfer Transformer)是一种由Google Brain团队在2019年提出的自然…

【计算机毕业设计】SSM汽车维修预约平台

项目介绍 本项目分为前后台&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色&#xff1a; 管理员登录,新增管理员信息,查看管理员信息,查询管理员信息,查看用户信息列表,查询用户信息,新增新闻公告,查看新闻公告,查询新闻公告,新增配件类…

数据结构与算法python版本之线性结构之无序表抽象数据类型有序链表抽象数据类型和总结

我们知道&#xff0c;列表List是一种简单强大的数据集结构&#xff0c;提供了丰富的操作接口&#xff1b;但是并不是所有的编程语言都提供了List数据类型&#xff0c;有时候需要程序员自己实现。 那么什么是列表呐&#xff1f; 列表是一种数据项按照相对位置存放的数据集&…

你读过最冷门,但「含金量极高」的书是什么?

这是一本比较冷门的书**《设计规则&#xff1a;模块化的力量》**&#xff0c;虽然豆瓣上只有58个评价&#xff0c;但是确实能学到很多东西。 这本书对我非常深远。不是是投资&#xff0c;创业&#xff0c;还是其他领域&#xff0c;模块化思想都能帮上你。这本书告诉我们生万物…

HarmonyOS 组件通用属性之尺寸设置

本文 我们一起来看一下 组件通用属性里面的 尺寸设置 具体来说 就是针对一个组件 进行宽高 边距等属性设置 我们可以先来看一张图 这是一个WEB PC端开发的视图 它是一个盒子模型 界面认为 每个元素都是一个盒子 最外面是 margin 外边距 然后 元素外围有一圈 border 边框 然后…

定岗定编设计:企业职能部门定岗定编设计项目成功案例

一、客户背景及现状分析 某大型车辆公司隶属于某央企集团&#xff0c;建于20世纪60年代&#xff0c;是中国高速、重载、专用铁路车辆生产经营的优势企业&#xff0c;轨道车辆制动机研发制造的主导企业&#xff0c;是隶属于国内最大的轨道交通设备制造上市企业的骨干二级公司。公…

[每周一更]-(第51期):Go的调度器GMP

参考文献 https://learnku.com/articles/41728http://go.cyub.vip/gmp/gmp-model.html#g-m-phttps://blog.csdn.net/ByteDanceTech/article/details/129292683https://www.ququ123.top/2022/04/golang_gmp_principle/ 什么是GMP? GMP模型是Go语言并发模型的核心概念&#x…

Debezium发布历史43

原文地址&#xff1a; https://debezium.io/blog/2018/12/05/automating-cache-invalidation-with-change-data-capture/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. 通过更改数据捕获自动使缓存失效 2018 年…

计算机基础面试题 |06.精选计算机基础面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…