前端页面img标签图片显示发生错误或者没有图片都显示默认的图片

最新推荐文章于 2024-06-20 01:14:24 发布
最新推荐文章于 2024-06-20 01:14:24 发布
阅读量6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36886116/article/details/83027337
版权

<img src="${sessionScope.user.thumbImg}" class="eval-self-photo" alt=""οnerrοr="οnerrοr=null;src='${ctx}/img/nophoto.jpg'"/>

Y-Handsome
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【微信小程序开发（7）---img标签属性 以及 网络图片的上传与显示模拟】附：img 标签 实例
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
01-03 1731
app.json中已经配置 { "pages":[ "pages/demo09/demo09" ] } demo09.wxss image{ box-sizing: border-box; border: 1px solid red; width: 300px; height: 200px; } demo09.wxml <image mode="bottom" lazy-load src="https://s3.ax1x.com/2021/01/03/spvMSe.jpg" /&
img图片加载出错处理
milli236的博客
12-29 2万+
为了美观当网页图片不存在时不显示叉叉图片 当在页面显示的时候，万一图片被移动了位置或者丢失的话，将会在页面显示一个带X的图片，很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息，也起不了多大作用。 其实，可以这样处理：当图片不存在的时候，会触发onerror事件，我们可以在该事件中做一下补救的工作，比如： 1、让这个图片元素隐藏： img src="图片的url地址"
前端页面图片加载失败显示默认图片
m0_48334955的博客
07-31 572
解决办法就是定义全局变量 num 每触发一次error num++，当num大于某一阀值的时候停止 定义error = null；关闭监听，并且显示alt的内容，做到向下兼容。如果默认图片也加载失败，会出现闪烁并且不断触发error方法，陷入死循环。5.可以避免陷入死循环的。不支持动态添加的元素。
img图片加载失败时，展示默认图片的方法
pirenyu2701的博客
06-20 690
1、 图片加载失败时会触发onerror事件，可以通过onerror事件使默认图片代替加载失败的图片。2、如果默认图片也加载失败时，那么onerror事件会被循环触发，导致打开网页错误。
前端图片加载失败显示默认图片，onerror不生效，onerror用法
qq_37418556的博客
04-27 3121
前端图片加载失败显示默认图片 HTML部分，给img标签添加属性onerror绑定下面的imgOnerror方法 <img :onerror="imgOnerror" :src="imageURL"/> 以下是vue3写法，先导入图片，再复制，直接给img.src赋值图片路径，可能会导致图片路径识别失败，onerror属性不生效主要还是看路径是否正确 // 第一步导入默认图片 const IMGSRC = require('../../assets/images/empty.png') con
vue动态加载图片--图片不存在时，显示默认图片
u010671652的专栏
10-16 4653
vue动态加载图片–图片不存在时，显示默认图片 一、背景 显示课程信息时，需要根据courseId为每一门课程绑定相应的课程图片。课程图片放在前端/src/assets/picture/course中。使用require导入图片时，若图片不存在，页面出现error，显示模块找不到。 二、初始的动态绑定方式 1、图片存放目录 2、script代码使用计算属性计算图片路径 export defaul...
当后台返回的图片在前端加载不出来时，前端做默认图片展示
濮家大少
08-16 5791
1问题描述 后台返回的图片加载到页面上时发现有些图片无法加载出来，这时前端要做默认图片展示，最初使用img标签的onerror事件，但是使用这个方法等了很长时间才将替换图片加载出来，且当默认图片也加载不出来时会继续触发onerror事件形成死循环。 问题展示： 后台返回的图片信息： 渲染到前端页面上： onerror事件之总后的替换图片 2解决方案 function CheckImgExists...
图片不存在的时候，显示一个默认图片.rar
07-04
在网页设计和开发中，有时候会遇到图片加载失败或者图片路径错误导致图片无法显示的问题。在这种情况下，一种常见的解决方案是设置一个默认图片，当实际图片无法加载时，自动显示这张默认图片，为用户提供友好的界面...
JS对img标签进行优化使用onerror显示默认图像
10-26
总结来说，本文讲述了如何利用JavaScript为img标签设置默认图像，当遇到图片加载失败的情况时，通过onerror事件调用预先定义的函数来避免加载错误的尴尬，并提供了具体的代码实现示例。通过这种方式，可以有效提升...
javascript 图片轮换显示效果代码
10-29
### JavaScript 图片轮换显示效果代码详解 #### 一、代码功能概述 这段代码实现了一个简单的图片轮换显示效果。其主要逻辑是通过JavaScript定时器（`setInterval`）每隔一定时间（本例中为1000毫秒即1秒）自动更换...
WEB前端实现裁剪上传图片功能
09-01
`FileReader`的`onload`事件会在文件加载完成后触发，此时可以通过`event.target.result`获取到图片的base64编码，将其设置为`img`标签的`src`属性，从而在页面上显示图片。 3. **图片压缩** 在上传之前，我们通常...
前端判断img图片未能正确加载时显示一个默认图片。img标签onerror事件设置了本地默认图片还是不显示的问题
qq_43807473的博客
06-29 2182
前端img标签中引用后端交给的图片地址时，路径下图片被删除或者损坏了，那么页面在加载img图片显示破碎，当破碎时显示自定义默认图片。前端判断img图片未能正确加载时显示一个默认图片。img标签onerror事件设置了本地默认图片还是不显示的问题
img使用src动态请求图片，同时需要设置请求头header的问题
热门推荐
在车上在路上的博客
03-22 3万+
目前做的项目里面有个二维码是动态加载出来的，最初使用vue双向绑定src实现了src能自动请求图片。 html <img :src="src"> js data:{ src:'' }, mounted: function(){ this.src = 'xxxxx/xxxxx/xxx?phoneNum='+phoneNum+'&width=200&height=20...
记录一次图片上传(非SpringMVC)
Mr_QinHongXin的博客
04-25 213
记录一次图片上传 一、提前准备 1、需要知道 一般进行图片上传处理的时候，将图片保存到oss中，路径保存到数据库，使用的时候调用路径即可 前端代码: 在java中使用form表单上传文件时form标签中必须加上 enctype=“multipart/form-data” enctype: 规定在发送到服务器之前应该如何对表单数据进行编码。 enctype的三个参数: |- application/x-www-form-urlencoded: 在发送前编码所有字符(默认) |- multipart/fo
img图片请求失败后的处理
weixin_44849078的博客
05-13 3989
视频与图片（video与img）请求失败后的处理1、onerror 事件监听2、onerror弊端的解决，优化写法3、背景图片 前端使用video与img标签时，有时候会遇到加载失败的情况，造成失败的原因有很多，网络问题、路径错误、资源已被删除等，img会显示一个裂图，video则没有任何提示，因此从用户体验上来说，需要进行处理，常用的是用准备好的一张图片来提示用户图片或者视频加载失败。 不做任何...
js上传图片代码实现
LYR 的博客
02-17 1252
<div class="edit-avatar"> <img src="${ (user.userAvatar) !}" alt="..." class="img-avatar"> <div class="avatar-divider"></div> <div class="edit-avatar-cont...
解决Element中el-empty不显示图片，控制台报错的问题
u011746482的专栏
03-03 6587
最近，在开发中用到了空状态组件el-empty，调试时发现空状态时的占位并没有显示出来，并在控制台中报错如下： [Vue warn]: Unknown custom element: <el-empty> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 解决办法：项目中已经全局引用了element，经查询发现是现有的.
＜img＞图像标签
2202_75549187的博客
12-05 382
图像标签
HTML 显示网页图片 若无法显示图片则显示文字
qq_36719861的博客
10-04 6693
一幅图像： 网页图像：
layui的img标签怎么展示本地图片
最新发布
07-26
Layui是一个基于jQuery生态的前端框架，提供了一套简洁优雅、功能丰富的组件及插件。为了使用layui的`<img>`标签展示本地图片，你需要完成以下几个步骤： ### 步骤1：引入layui库 首先，在HTML文件头部通过CDN引入layui的JS和CSS文件。 ```html <!-- 引入 layui JS --> <script src="https://cdn.jsdelivr.net/npm/layui@2.x/dist/layuimin.js"></script> <!-- 引入 layui CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.x/dist/css/layui.css"> ``` ### 步骤2：选择本地图片路径 确定本地图片的存放位置，并获取其路径。路径可以是相对路径也可以是绝对路径，取决于图片相对于HTML文件的位置。 例如，假设图片位于项目根目录下的 `/images/test.jpg` 文件夹中，则相对路径可能是 `../images/test.jpg`；如果直接放在HTML所在目录下，则可以使用当前目录相对路径或直接使用文件名。 ### 步骤3：使用 `<img>` 标签加载图片 在页面中使用 `<img>` 标签并设置 `src` 属性为图片的实际路径。确保路径正确无误，避免因路径错误导致无法加载图片。 示例代码如下： ```html <img src="../images/test.jpg" alt="测试图片"> ``` 这里的 `"../images/test.jpg"` 需要根据你的实际图片位置做相应调整。 ### 相关问题 - 示例扩展： #### 1. 如果图片加载失败如何处理？ 通常，你可以添加 `onerror` 属性，指定图片加载失败时的行为，比如显示默认图片或提示信息。 ```html <img src="../images/test.jpg" alt="测试图片" onerror="this.onerror=null;this.src='defaultImage.png';"> ``` #### 2. 如何让图片响应式地适应各种屏幕尺寸？ 为了使图片适应不同的屏幕尺寸，可以使用 CSS 的 `max-width` 和 `width: 100%;` 来让图片宽度按照容器宽度缩放，同时保留原始比例。 示例 CSS： ```css img { max-width: 100%; height: auto; } ``` #### 3. 能否通过脚本动态加载或切换图片？ 是的，可以通过 JavaScript 或者前端框架如 Vue.js、React 等的组件来动态更改 `<img>` 标签的 `src` 属性，实现图片的切换效果，增强用户体验。 例如，使用纯JavaScript： ```javascript let imgElement = document.querySelector('img'); // 定义一组图片URL数组 const imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 自动播放图片切换动画 setInterval(function() { const currentUrlIndex = imageUrls.indexOf(imgElement.src); if (currentUrlIndex !== -1) { let nextUrlIndex = (currentUrlIndex + 1) % imageUrls.length; imgElement.src = imageUrls[nextUrlIndex]; } }, 2000); // 每隔两秒切换一次 ``` 以上介绍了如何使用 layui 的 `<img>` 标签加载并展示本地图片，以及几个常见的扩展应用点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值