img 标签 / div 背景图片 默认图片 裂图替代

最新推荐文章于 2023-07-14 18:09:24 发布
最新推荐文章于 2023-07-14 18:09:24 发布
阅读量5.9k 收藏 1
点赞数
分类专栏： vue HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/afr3828/article/details/79130559
版权
HTML 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏
img 标签中用默认图片代替没有准备图片的情况及用默认图片代替裂图
< img :src= " list_data.activity.activityImg== '' ? '/static/images/questionnaireLogo1.png' :list_data.activity.activityImg "  οnerrοr= " this . onerror = '' ; src = '/static/images/questionnaireLogo1.png' " >

:src 不必多说，
onerror 错误事件，裂图是触发 onerror 事件，用默认图片作为 src 的值，但是有一种情况是默认图片也找不到了，有无限错误的风险，因此加上  this . onerror = ‘’ 
在裂图的情况下连默认图片也找不到就作罢 


背景图片的情况：
<div class="div3" :style="{'background-image':'url('+ (item.img===''?defaultLogo:_systemPath+item.img) +')'}"></div>

洪海洋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
设置img的默认图片
05-20 72万+
javascript代码：
裂图怎么显示成默认图片，基础原始js面试题
qq_54357490的博客
07-05 829
我们在使用图片的时候，经常会遇到图片加载失败的情况 我们可以通过一些处理在让他加载默认图片，或者别的图片 <img src="https://img0.baidu.com/it/u=297780656,1813209409&fm=11&fmt=auto&gp=0.jpg" alt="" onerror="imgerrorfun()"> function imgerrorfun(){ let img=document.querySelector('img
img标签设置默认图片
小星落
12-27 5456
有时需要给图片设置默认图，比如用户头像，默认商品图等。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默认图片的问题
weixin_30670151的博客
08-10 123
<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /> 转载于:https://www.cnblogs.com/yangpeng2036102/p/3582680.html
img图裂，实现隐藏或者替换
wow_scott的博客
10-25 1415
后台给的图片地址好多不能访问，页面不做处理会直接影响布局 <img class="img" src="图片地址" onerror="defaultImg(this)" /> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> func...
jQuery图片加载显示loading效果
10-21
每张图片都包含在`.img-thumbnail`类的`<img>`标签中，这些图片的源（src）指向不同的图片路径。 ```html <div class="container"> <div class="row block" id="img-list"> <!-- 多个包含img-thumbnail类的图片 -...
jquery图片不完全按比例自动缩小的简单代码
10-27
在网页开发过程中，图片的展示效果常常是设计和用户体验的关键因素之一。...此外，还可以考虑使用CSS的`object-fit`属性作为替代方案，它提供了更丰富的图片填充和适应方式，但需要注意浏览器兼容性问题。
微信小程序 图片边框解决方法
11-26
其次，如果img标签只是为了占位，我们可以选择使用其他无边框的块级元素来替代，如`div`或`span`等。这些元素默认是没有边框的，因此不会出现黑色边框的问题。在需要显示图片时，再将这些占位元素替换为img标签。...
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
10-16
在本文中，我们将探讨如何在layui框架中实现富文本图片上传接口以及普通按钮触发的文件上传功能。layui是一款轻量级的前端组件库，它提供了丰富的UI组件，包括表单、表格、弹窗等，非常适合用于快速构建页面。在...
多行排列图片时hover上去加边框挤图片的解决方法兼容IE7+
09-25
在网页设计中，我们经常会遇到一个问题，那就是当多个图片以多行多列的方式排列时，如果在鼠标悬停（hover）时为图片添加边框，会导致下方的图片位置发生偏移，这种现象被称为“边框挤压”问题。尤其是在兼容较老...
图片破图后让其展示默认图片
weixin_41674235的博客
10-13 411
在前端页面中，拿到的图片路径已经丢失，错误，找不到时，展示在页面中的图片就是一张破图 需要将其换成一张默认图片（原生js定义html字符串的写法） <img src="错误图片.png" onerror="this.src='./images/mrt.png'" alt="" /> ./images/mrt.png就是一张默认图片 同理如果需求是破图不展示图片的写法： <img src="错误图片.png" onerror="this.style.display='none';" alt
vue img 图片损坏时展示替图片
qq_58340302的博客
07-14 503
场景：图片地址找不到时，会展示如图一；虽然没什么大影响，但是有点丑，需求是想在图片损坏时展示替补图片，如图二。代码实现：给img标签加@error=""事件。
非零基础自学前端最后一遍 一 HTML+CSS 2 HTML常见的元素 2.4 img元素的两个属性和可替换性
谢谢你们的关注
03-09 65
非零基础自学前端最后一遍 一 HTML+CSS 2 HTML常见的元素 2.4 img元素的两个属性和可替换性
页面中所有受损的图片都替换了
肖肖肖丽珠的博客
08-31 495
所有受损的图片都用default.png来代替。受损就是src没找到 $("img").on("error",function(){ $(this).attr("src","images/default.png") })
img 图片找不到时，设置显示默认图片
qq_44290077的博客
07-06 8988
img 图片找不到时，设置显示默认图片
DIV小头像
Up was the only direction your compass navigate.
03-29 689
背景   在做大米清单的时候需要做一个头像，但是正方形的太丑了，棱角分明，给人冷冰冰的感觉。所以就需要把它美化一下，圆润一些。 实现   通过一番实验之后，可以实现正方形、圆形、和圆角。      普通显示正方形图片：&lt;img style="" class="avatar" src="~/content/IMG/dog.jpg"&gt;   效果：      显示圆...
html的img标签不想显示某个图片或者没有图片时img标签不显示裂图
codezl的博客
12-04 4378
img标签src为空时，不想出现裂开的图标 img[src=""],img:not([src]){ opacity:0; }
img图片路径错误时，显示破图/图片裂开，如何处理？
热门推荐
weixin_47793882的博客
03-25 1万+
img图片路径错误时，显示破图/图片裂开，如何处理？ 首先我们可以设置img的alt属性，当图片显示不出来的时候就会显示对应的文字，但是此时还会出现一张图片破裂，很不美观。 如下： 一、第一种方式： 1.设置css样式 img[src=''], img:not([src]) { opacity: 0; } 2.路径出错时，把路径置空 js写法: <img :src="scope.row.logoUrl" alt="logo" onError={{ this.src = ''}}
html怎么设置默认状态,网页中如何设置默认图片？方式介绍
weixin_34410564的博客
05-30 654
网页中如何设置默认图片？下面本篇文章就来给大家介绍一下在网页中设置默认图片，防止当图片资源失败时出现的问题。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在谷歌浏览器中就会显示这样这里的alt属性是为了当图片加载失败时告诉用户图片信息的能不能美化一下呢？下面给出几种方式js 方式相信大家碰到这种问题是，搜索的结果一般...
vue中image图片渲染404后如何添加默认图片
最新发布
08-12
### 回答1： 当图片渲染404时，Vue提供了一种解决方案，即使用`v-bind`指令绑定一个`onerror`事件，当图片加载失败时，触发`onerror`事件，我们可以在该事件中指定一个默认图片地址。具体实现如下： ```html <template> <img v-bind:src="imageUrl" v-bind:onerror="setDefaultImage" /> </template> <script> export default { data() { return { imageUrl: "http://example.com/image.jpg", defaultImageUrl: "http://example.com/default.jpg", }; }, methods: { setDefaultImage(event) { event.target.src = this.defaultImageUrl; }, }, }; </script> ``` 在上面的代码中，我们在`<img>`标签上使用了`v-bind`指令绑定了`src`属性和`onerror`事件。当图片加载失败时，会触发`onerror`事件，并执行`setDefaultImage`方法。`setDefaultImage`方法中，我们将图片的`src`属性修改为默认图片的地址，从而实现了默认图片的显示。 ### 回答2： 在Vue中，当图片渲染404时，可以通过使用v-bind指令和v-on指令来添加默认图片。具体步骤如下： 1. 在Vue组件中，为需要渲染图片的img标签添加v-bind指令，将图片链接绑定到一个变量上。例如： ``` <img v-bind:src="imageUrl" v-on:error="handleImageError"> ``` 2. 在data钩子函数中，定义一个默认图片的链接，并将其赋值给imageUrl变量。例如： ``` data() { return { imageUrl: '默认图片链接' } }, ``` 3. 在methods钩子函数中，创建一个名为handleImageError的方法，用于处理图片加载错误。这个方法会在图片加载错误时被触发。例如： ``` methods: { handleImageError() { this.imageUrl = '默认图片链接'; } } ``` 4. 当图片加载错误时，handleImageError方法会被调用，将默认图片的链接赋值给imageUrl变量。这样就能在图片渲染404时显示默认图片。 以上就是在Vue中如何添加默认图片的步骤。通过使用v-bind指令将图片链接绑定到变量上，并在v-on指令中添加一个错误处理方法，即可实现在图片渲染404时显示默认图片的功能。 ### 回答3： 在Vue中，当image图片加载失败时，可以通过添加默认图片来替代展示。 首先，在data中定义一个默认图片的URL地址： ```javascript data() { return { defaultImageUrl: '/path/to/default-image.png' } } ``` 然后，在<img>标签中使用v-bind指令绑定一个属性，使用三元表达式来判断图片地址是否为404，如果是则使用默认图片URL： ```javascript <template> <div> <img v-bind:src="imageUrl" v-bind:alt="imageAlt" v-bind:title="imageTitle" /> </div> </template> <script> export default { data() { return { imageUrl: '/path/to/image.png', // 图片地址 imageAlt: 'Image Alt', // 图片alt属性 imageTitle: 'Image Title' // 图片title属性 } }, methods: { handleImageError(event) { if (event.target && event.target.src !== this.defaultImageUrl) { event.target.src = this.defaultImageUrl; } } }, mounted() { this.$nextTick(() => { const image = this.$el.querySelector('img'); if (image) { image.addEventListener('error', this.handleImageError); } }); }, beforeDestroy() { const image = this.$el.querySelector('img'); if (image) { image.removeEventListener('error', this.handleImageError); } } } </script> ``` 在上述代码中，handleImageError()为图片加载错误的回调函数，当图片加载失败时，该函数会将图片的src属性替换为默认图片的URL地址。 最后，在mounted钩子函数中，通过querySelector获取到img元素，并给它绑定error事件，在事件触发时执行handleImageError方法。在beforeDestroy钩子函数中，移除error事件的绑定，防止内存泄漏。 这样，当图片加载失败时，会自动替换成默认图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值