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

最新推荐文章于 2023-07-14 18:09:24 发布

洪海洋

最新推荐文章于 2023-07-14 18:09:24 发布

阅读量5.9k

点赞数

分类专栏： vue HTML 文章标签： HTML

本文链接：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> 

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

洪海洋

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue中错误图片的处理的实现代码

10-16

总结来说，Vue.js中处理错误图片的两种方法，一是使用默认图片的路径作为img标签src的直接值，二是通过全局自定义指令来动态检测图片是否加载成功，并据此加载默认图片。在实际项目中，根据不同的需求选择合适的方法...

jQuery图片加载显示loading效果

10-21

每张图片都包含在`.img-thumbnail`类的`<img>`标签中，这些图片的源（src）指向不同的图片路径。 ```html <div class="container"> <div class="row block" id="img-list"> <!-- 多个包含img-thumbnail类的图片 -...

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

前端判断img图片未能正确加载时显示一个默认图片。img标签onerror事件设置了本地默认图片还是不显示的问题

qq_43807473的博客

06-29

2191

前端img标签中引用后端交给的图片地址时，路径下图片被删除或者损坏了，那么页面在加载img图片显示破碎，当破碎时显示自定义默认图片。前端判断img图片未能正确加载时显示一个默认图片。img标签onerror事件设置了本地默认图片还是不显示的问题

设置img的默认图片

热门推荐

05-20

72万+

javascript代码：

裂图怎么显示成默认图片，基础原始js面试题

qq_54357490的博客

07-05

875

我们在使用图片的时候，经常会遇到图片加载失败的情况我们可以通过一些处理在让他加载默认图片，或者别的图片 <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

5610

有时需要给图片设置默认图，比如用户头像，默认商品图等。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

129

<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /> 转载于:https://www.cnblogs.com/yangpeng2036102/p/3582680.html

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 = ''}}

jquery图片不完全按比例自动缩小的简单代码

10-27

在网页开发过程中，图片的展示效果常常是设计和用户体验的关键因素之一。...此外，还可以考虑使用CSS的`object-fit`属性作为替代方案，它提供了更丰富的图片填充和适应方式，但需要注意浏览器兼容性问题。

微信小程序图片边框解决方法

11-26

其次，如果img标签只是为了占位，我们可以选择使用其他无边框的块级元素来替代，如`div`或`span`等。这些元素默认是没有边框的，因此不会出现黑色边框的问题。在需要显示图片时，再将这些占位元素替换为img标签。...

vue实现图片懒加载的方法分析

10-15

loading：正在加载中的默认图片。 attempt：尝试加载图片的最大次数，默认为3次。 data-src：图片真实地址的属性名，默认为'data-src'。 listenEvents：Vue需要监听的事件，默认为['scroll']，还可以监听如wheel...

img图裂，实现隐藏或者替换

wow_scott的博客

10-25

1455

后台给的图片地址好多不能访问，页面不做处理会直接影响布局 <img class="img" src="图片地址" onerror="defaultImg(this)" /> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> func...

图片破图后让其展示默认图片

weixin_41674235的博客

10-13

428

在前端页面中，拿到的图片路径已经丢失，错误，找不到时，展示在页面中的图片就是一张破图需要将其换成一张默认图片（原生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

532

场景：图片地址找不到时，会展示如图一；虽然没什么大影响，但是有点丑，需求是想在图片损坏时展示替补图片，如图二。代码实现：给img标签加@error=""事件。

非零基础自学前端最后一遍一 HTML+CSS 2 HTML常见的元素 2.4 img元素的两个属性和可替换性

谢谢你们的关注

03-09

非零基础自学前端最后一遍一 HTML+CSS 2 HTML常见的元素 2.4 img元素的两个属性和可替换性

页面中所有受损的图片都替换了

肖肖肖丽珠的博客

08-31

501

所有受损的图片都用default.png来代替。受损就是src没找到 $("img").on("error",function(){ $(this).attr("src","images/default.png") })

img 图片找不到时，设置显示默认图片

qq_44290077的博客

07-06

9392

img 图片找不到时，设置显示默认图片

DIV小头像

Up was the only direction your compass navigate.

03-29

704

背景在做大米清单的时候需要做一个头像，但是正方形的太丑了，棱角分明，给人冷冰冰的感觉。所以就需要把它美化一下，圆润一些。实现通过一番实验之后，可以实现正方形、圆形、和圆角。普通显示正方形图片：<img style="" class="avatar" src="~/content/IMG/dog.jpg"> 效果：显示圆...

html的img标签不想显示某个图片或者没有图片时img标签不显示裂图

codezl的博客

12-04

4471

img标签src为空时，不想出现裂开的图标 img[src=""],img:not([src]){ opacity:0; }

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事件的绑定，防止内存泄漏。这样，当图片加载失败时，会自动替换成默认图片。

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

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