前端的一些注意事项 <img onerror="src='images/no.png'">标签引起的异常

最新推荐文章于 2026-04-10 11:12:27 发布

原创最新推荐文章于 2026-04-10 11:12:27 发布 · 1w 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了在使用HTML img标签时如何正确配置onerror属性来避免因图片加载失败而导致的前端崩溃及后端频繁404错误。提供了两种有效方案：一是通过清空onerror事件阻止循环请求；二是采用Base64编码确保默认图片始终可显示。

img标签的属性设置

            <img  src="XXXXX.png" onerror="src='images/no.png'" class="img-rounded"/>

当src的文件找不到时会触发 onerror来重新请求images/no.png这张图片，但是这张图片也不存在时会循环访问服务器请求图片造成前端崩掉，后端频繁的404 error请求。

特别当分布式部署，而静态资源在别处时，这个情况还是容易遇到的。

解决方案

①

            <img th:src="XXXX.png" onerror="this.onerror='';src='images/no.png'" class="img-rounded"/>

这样连onerror的图片显示不出来的情况，跟不设置onerror的情况时一样的，浏览器会给你显示一张碎裂的缩略图。因为你的image/no.png图片没找到，404错误

②

还有一个解决方法

就是onerror的图片用base64编码显式写进去,优点是一定会显式onerror设置的默认图片，缺点是字符有点儿长

标签

#前端 #标签 #异常 #web服务器

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

淘气的高老板

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

从＜img onerror＞看XSS攻击原理与防御实战

weixin_32428571的博客

06-19

330

跨站脚本攻击是Web安全领域的核心威胁之一，其本质在于攻击者能够将恶意脚本注入到受信任的网页中，当其他用户访问时，这些脚本会在其浏览器中执行。攻击原理通常利用应用程序对用户输入数据未经充分验证或转义，便直接输出到HTML页面中，从而被浏览器解析为可执行代码。这种攻击的技术价值在于它能直接窃取用户会话Cookie、实施钓鱼欺诈、甚至控制用户浏览器行为，对数据安全和用户体验构成严重威胁。在常见的应用场景中，如论坛评论、用户资料页、搜索框等用户输入点，都可能成为XSS攻击的入口。本文通过深入剖析经典的<img s

微信小游戏开发实战：从零拆解“汉字找茬”源码架构与实现

最新发布

weixin_30565199的博客

07-12

406

微信小游戏开发是当前移动端轻量化游戏开发的重要方向，其核心在于利用微信生态的社交传播能力和原生Canvas渲染技术，高效构建互动应用。从技术原理上看，微信小游戏框架提供了基于Canvas 2D或WebGL的绘图API，开发者需要掌握数据驱动渲染、事件交互处理以及资源管理等核心概念。其技术价值在于能够快速实现高性能的2D游戏，并轻松集成社交分享、广告变现等商业化功能，尤其适合开发像“汉字找茬”这类玩法简单、易于传播的益智类游戏。在应用场景上，这类游戏充分利用了用户的碎片化时间，通过低门槛的汉字识别玩法，结合排

参与评论您还未登录，请先登录后发表或查看评论

Sentinel-1 Burst数据处理避坑实录：从aria2c报错到wget脚本救场

weixin_42641998的博客

04-10

254

本文详细介绍了Sentinel-1 Burst数据处理的完整解决方案，从下载困境到高效处理技巧。针对aria2c报错等常见问题，提供了增强版wget脚本和智能分组方法，显著提升下载成功率和处理效率，特别适合科研机构和企业级网络环境下的哨兵数据处理需求。

图片加载失败捕获上报及处理

qq_42880714的博客

06-29

4924

图片加载失败捕获上报及处理

Windows11配置WSL2支持代理上网

jiexijihe945的博客

07-09

9564

说起来本来这个功能我也不需要的，只是最近突然有个需求就顺便研究了下，WSL2默认的网络方式是NAT，即WSL2的网卡本身是虚拟网卡，通过以太网或WIFI的地址转换来上互联网，我试了下是不能直接走代理的，最近比较忙没具体研究，但是我用另一种方式实现了，下面介绍给需要的人。注意：这个方法只能是WIndows11系统，WIndows10系统上的WSL2缺少了一项功能导致不可用。1、方法总体没什么难度，NAT方式暂时没研究透，后续有时间再研究2、WIndows10系统不支持mirrored，暂时需要另辟蹊径。

vue中img标签onerror事件

qq_43203949的博客

02-21

1万+

vue中img标签onerror事件使用:onerror去绑定事件该方法能正确处理onerror事件，并防止闪图 <img type="image/x-icon" :src="item.icon?item.icon:''" :onerror="imgOnError" /> //图片损毁时触发 imgOnError(e){ let img = e.srcElement; img.src = this.errorImg; img.oner

idea中使用thymeleaf 模板＜img th:src=“${map.user.headerUrl}“ 报错Cannot resolve ‘user‘

qq_43987149的博客

04-16

3119

1、报错信息 idea 中使用 thymeleaf 时报错 <img th:src="${map.user.headerUrl}" 报错Cannot resolve 'user' 2、后端代码 @RequestMapping(path = "/index", method = RequestMethod.GET) // 设置界面传过来orderMode的默认值是0，如果没有传过来name为orderMode的值，就将参数orderMode设置为0 public String getInde

img th:src传输图片

weixin_44575964的博客

07-16

3111

thymeleaf中 th的几种拼接方法

qq_39162838的博客

09-13

5323

1、拼接href \src src示例： <img th:src="@{/img/research/{filename}(filename=${research.filename})}"> href示例： <a th:href="@{'https://'+${url.url}}" th:text="${url.urlName}"></a> 2、拼接onclick 方式1、 <button class="btn" th:onclick="'audit

Thymeleaf条件表达式的使用例子

qq_634380940的博客

04-11

619

Thymeleaf条件表达式的使用例子

前端图片格式

qq_42880714的博客

07-12

892

前端图片格式

thymeleaf服务器模板引擎，实现动态html，用于java发送邮件的html正文

小先生编程

04-14

3818

工作中遇到的问题以及解决方案：问题1. 项目运行后访问不了html文件：报如下错误解决方案：设置引擎使用resolverhtml 中如何循环渲染表格，能否像jsp中c：forEach一样循环：如何判断后端传递的数组长度，以及如何动态控制标签的显示隐藏？使用th:if 即可如何对数值进行格式化，比如金额每三个数字前加个逗号，或者扩大100倍拼接百分号：使用#numbers.formatDecimal实现：

关于thymeleaf img src动态参数赋值

qq_41735871的博客

07-20

6552

关于thymeleaf img src动态参数赋值 1、在pom.xml中配置thymeleaf <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 2、配置application.properties路径应该以什么

Thymeleaf-常用属性

BoringError的博客

09-13

3401

Thymeleaf内置了许多属性，包括超链接使用的href属性、表单提交使用的action属性、遍历集合使用的each属性等，方便我们对模板进行修改，熟记这些常用属性，可以帮我们解决开发中大多数问题。

图片中的onerror事件

黎成诃月的博客

07-02

824

<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，图片不存在将显示 logoError.png。...

注意img图片的onerror事件.

Ethan Woo 的博客

11-25

203

数据迁移至www.chinaoc.com.cn，点击查看详细：注意img图片的onerror事件.

解决 img onerror 不断刷图片的问题

gz-郭小敏的博客

02-28

1774

原因：加载的图片失败，而onerror提供的图片也加载失败解决方法： let html = `<img src="${props.Url}" onerror="this.src= '/assets/img/head.png'; this.onerror = null;">` ...

Html（三）图像img

qq_55796594的博客

03-23

1206

Html（三）图像img1.介绍1.1属性2.使用2.1基础使用2.2图片超链接2.3图像热区链接 1.介绍在 HTML 中，图像由标签定义。 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。 1.1属性属性值描述 alt text 规定图像的替代文本 src URL 规定显示图像的url height pixels% 定义图像的高度 ismap URL 将图像定义为服务器端图像映射 longdesc URL 指向包含长的图像描述文档的U

前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

05-21

1378

前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！

Spring Boot (三)：Thymeleaf 的使用