<img>标签链接失效显示默认图片

最新推荐文章于 2023-09-10 22:21:43 发布
原创 最新推荐文章于 2023-09-10 22:21:43 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在网页中使用图片的备选加载方案，当指定图片URL无效时，将自动尝试加载默认图片，确保页面显示效果不受影响。

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

<img src="errurl" onerror="this.src='default.jpg'">

tomatoFIREegg
关注
vue脚手架项目的详解
weixin_68658847的博客
02-16 3787
vue脚手架项目的详解
img标签设置默认图片
小星落
12-27 6055
有时需要给图片设置默认图，比如用户头像，默认商品图等。img的alt属性只是给图片设置未加载时的文字提示信息。这时，通常会用到onerror属性，一下为常用的两种方法： 1、让图片元素隐藏 <img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/> 2、设置默认图 <img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/> 第二种方式
关于img标签使用默认图片的方法
WJL_MGQS的专栏
03-02 9846
这里介绍两种方法（分为两种情景）： 1：使用struts2的标签解决(用JSTL也差不多)： 适用情景：学生照片有无照片路径值，有显示学生照片，没有就显示默认照片 中的stack Context中找到，所以用的时候记得前面加#-->      " width='240' height="240" />                   2：使用javascript解决
为了美观当网页图片不存在时不显示叉叉图片
勿忘初心的博客
12-06 7804
当在页面显示的时候，万一图片被移动了位置或者丢失的话，将会在页面显示一个带X的图片，很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息，也起不了多大作用。 其实，可以这样处理：当图片不存在的时候，会触发onerror事件，我们可以在该事件中做一下补救的工作，比如： 1、让这个图片元素隐藏： 为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="
设置img标签的默认图片
WXY19951125的博客
12-10 973
img标签的属性有： src：图片路径 width：宽度 height：高度 title：鼠标悬停在图片时显示的文字内容 alt ：用来告诉浏览器当需要显示的图片找不到时显示的内容 当src中的资源不存在或无法正常访问时，需要显示默认图片“default.png”。但是当onerror中设置的图片路径也不存在时就会导致浏览器一直加载这个图片资源，造成堆栈溢出错误。为了完善我们通常在后面加上this.οnerrοr...
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <html> <head> <!-- 页面meta --> <meta charset="utf-8"> <title>书虫补给站</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/_all-skins.min.css"> <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script> <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script> <script src="${pageContext.request.contextPath}/js/app.js"></script> <script type="text/javascript"> function SetIFrameHeight() { var iframeid = document.getElementById("iframe"); //iframe id if (document.getElementById) { iframeid.height = document.documentElement.clientHeight; } } </script> </head> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- 页面头部 --> <header class="main-header"> <!-- Logo --> <a href="${pageContext.request.contextPath}/admin/index.jsp" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>智阅云联</b></span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>书虫补给站</b></span> </a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top"> <nav class="navbar navbar-static-top"> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a > <img src="${pageContext.request.contextPath}/img/user1.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">${USER_SESSION.name}</span> </a> </li> <li class="dropdown user user-menu"> <a href="${pageContext.request.contextPath}/userServlet?method=logout"> <span class="hidden-xs">注销用户</span> </a> </li> </ul> </div> </nav> </nav> </header> <!-- 页面头部 /--> <!-- 导航侧栏 --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- /.search form --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu"> <li id="admin-index"> <a href="${pageContext.request.contextPath}/admin/index.jsp"> <i class="fa fa-dashboard"></i> <span><b>新书推荐</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=search" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>图书借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=searchBorrowed" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>当前借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/recordServlet?method=searchRecords" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>借阅记录</b></span> </a> </li> </ul> </section> <!-- /.sidebar --> </aside> <!-- 导航侧栏 /--> <!-- 内容区域 --> <div class="content-wrapper"> <iframe width="100%" id="iframe" name="iframe" onload="SetIFrameHeight()" frameborder="0" src="${pageContext.request.contextPath}/bookServlet?method=selectNewbooks"></iframe> </div> </div> </body> </html>帮我优化一下这段代码
最新发布
06-19
<img data-src="/images/cover.jpg" class="lazyload" alt="封面"> <script> new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.src = entry....
<div class="slider-check-box"> <div class="slider-check" :class="rangeStatus ? 'success' : ''"> <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"> <img class="width-30 mx-12" src="@/assets/smd/滑块.png"/> </i> {{ rangeStatus ? successText : startText }} </div> </div>如果鼠标放到img标签上就会影响i标签的滑动效果
04-08
`<i>` 标签是一个包裹了 `<img>` 图标的容器，并绑定了 `@mousedown="rangeMove"` 事件来触发滑动操作。 ### 分析问题 当鼠标放在 `<img>` 上时影响到 `<i>` 滑动效果的原因可能是由于事件冒泡机制导致的。具体来说...
<!DOCTYPE html> <head>     <meta charset="UTF-8">     <title>导航条的使用</title>     <script src="../../jquery.js"></script>     <style>         /* 新增CSS */         .extra-content { display: none; }         .highlight { background-color: #ffeeba; }     </style>     </head> <body>     <!-- 新增HTML -->     <div class="controls">         简化     </div>     <div class="extra-content">         <p>附加信息...</p >     </div>     <script>       // 完整jQuery代码         $(function() {         // 任务一功能             $('.title').click(function() {                 $(this).siblings('.content').slideToggle(300);                 $(this).find('.arrow').toggleClass('expanded');             });         // 任务二功能             $('.toggle-link').click(function(e) {                 e.preventDefault();                 const $this = $(this);                 const isSimplify = $this.text() === '简化';                 $('.extra-content').toggle(!isSimplify);                 $('.content').toggleClass('highlight', isSimplify);                   $this.text(isSimplify ? '更多' : '简化');             });         });     </script> </body>
03-09
<img src="arrow.png" class="arrow"> </div> <div class="content"> <p>主内容区域...</p> </div> </div> ``` --- ### 问题二：交互控件类型错误 (任务二失效) **错误现象**：`简化`使用普通div而非可点击...
<a href="#"><img src="荟链logo1.png" alt="荟链贸易" width="145" height="33"></a>为什么我图片加载不出来
04-02
这种情况下，即使图片链接能在新窗口中打开，嵌入到页面中的`<img>`标签也可能失效[^5]。 4. **编码或特殊字符处理不当** URL中包含非法字符（如中文、空格或其他非标准ASCII字符），可能导致解析失败。需确保URL...
图片img标签设置默认图片
weixin_39501680的博客
10-28 2490
图片img标签设置默认图片
Vue全局为`img`标签设置默认图片的优雅解决方案
Humphrey的博客
07-21 2213
在Vue项目开发过程中，我们经常会遇到图片加载失败的情况，这时候如果没有一个默认的占位图，用户体验会大打折扣。通常情况下，我们会在每个img标签上添加onerror事件来处理这种情况。但是，如果项目已经进行了一大半，页面中有大量的img标签，一个个去添加onerror事件无疑是一项繁琐且容易出错的工作。本文将介绍一种全局设置img标签默认图片的方法，无论是Vue 2还是Vue 3，都能轻松实现。
img标签中的图片加载异常时显示默认的图片
weixin_33866037的博客
11-17 246
备忘：
设置img的默认图片
热门推荐
05-20 72万+
javascript代码：
html中img 与backgroundImage 如何设置默认图片？
sunxucongming的博客
09-10 1170
大家可能都知道。
VUE：img标签加载图片失败时，显示一张自定义默认图片
干饭搬砖两不误。
07-29 1万+
关于img标签加载图片失败时，显示一张自定义的默认图片
H5中img标签中的图片链接失效了给一个默认的图片地址
weixin_44877713的博客
01-12 548
//当src中的‘地址1’失效以后就会访问onerror中的‘地址2’ <img src="地址1" onerror="地址2" />
<img>标签链接地址失效如何自动显示默认图片
weixin_34402090的博客
12-31 261
&lt;img src="errurl" onerror="this.src='default.jpg'"&gt;  
img 图片找不到时，设置显示默认图片
qq_44290077的博客
07-06 1万+
img 图片找不到时，设置显示默认图片
img图片不压缩显示
11-28
当我们在网页上使用`<img>`标签加载图片时，默认情况下浏览器会尝试对图片进行一些优化，比如压缩以节省网络传输时间和带宽。如果您想要保留图片原始大小而不进行压缩，可以采取以下几种方法： 1. **设置图片宽度和高度属性**: 直接在`<img>`标签中指定图片的宽度和高度，而不是让它们自适应容器： ```html <img src="image.jpg" width="800" height="600"> ``` 这样浏览器就会显示原始尺寸的图片，不会自动缩放。 2. **设置`object-fit`和`width/height`**: 对于响应式图片，您可以使用CSS的`object-fit`属性来保持图片原始比例，同时设置固定宽度和高度： ```html <img src="image.jpg" style="width: 400px; height: auto;"> ``` 或者： ```css img { object-fit: contain; width: 100%; max-width: 400px; } ``` 3. **使用data-src和JavaScript**: 在HTML中先放置占位符（通常是`<img data-src="..." />`），然后在JavaScript中异步加载并设置真实的`src`： ```javascript const img = document.querySelector('img[data-src]'); img.src = img.dataset.src; ``` 这样也可以避免在页面渲染时就加载大图影响性能。 请注意，这样做可能会增加页面的初始加载时间，特别是对于大型图片。在实际应用中，您可能需要权衡性能和视觉效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值