img标签的src为空时，显示默认边框处理方法

最新推荐文章于 2023-11-09 10:11:15 发布
最新推荐文章于 2023-11-09 10:11:15 发布
阅读量2.8k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： css 文章标签： img标签的src为空时 img显示默认边框 img的src为空 img默认边框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lyyo_cd/article/details/97137761
本文介绍了一种解决图片源为空时出现的默认边框问题的方法，该问题主要出现在移动端。通过实践经验和多次尝试，提供了一个有效方案。

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

不说废话，在查阅n多资料，踩过无数坑后，解决img的src为空的时候，会有恶心的默认边框（目前只在移动端测试）

处理：

web前端入门到实战：HTML图像标签img和源属性src及Alt属性、宽高、对齐
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-03 1529
使用<img>标签定义 HTML 页面中的图像,图像标签<img>有两个必需的属性：源属性src和alt，<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src指 “source”。源属性的值是图像的 URL 地址。` 1 定义图像的语法是： 2 <img src="url" alt="some...
javascript批量检查当图片不存在时则显示默认图片的代码
12-09
在这种情况下，一个优雅的处理方式是在图片无法加载时显示默认图片。这不仅可以避免页面出现空白，还能保持页面的美观和一致性。在本文中，我们将讨论如何使用JavaScript来实现这个功能。 首先，我们来看一下HTML的...
img标签去间隙及src为空时的默认边框
FBm的博客
11-22 4370
一 间隙问题 多个img图片放在容器中时，会出现间隙，就算设置margin:0;padding:0也无法解决问题，类似下图（如果觉得背景色好看，请阅读css好看背景色贴）： 请看代码： 定义img宽度为warp容器的25%，但是实际效果img在容器却不能排成一行，而是因为间隙被挤了下去。 因此在查阅相关资料以后，总结以下几种解决方法： 1 .wrap img添加float
去掉img默认边框
qq_43405603的博客
12-06 968
img:not([src]) { opacity: 0; }
HTML img src图片路径不存在，则显示一张默认图片的方法
阅读之后，对你有帮助，那就点个赞再走吧
05-25 6695
我们一般会给图片设置alt属性，当图片路径不存在时可以显示提示文字。 <imgsrc=""alt="图片加载失败"> 如图所示： 但是这样很不好看，如果用在文章列表，我们可以给 img 标签设置一个onerror属性，可以在src路径不存在时显示指定的默认图片。 测试一下，我没有给src设置图片链接，代码如下： <imgsrc=""onerror="this.src='img/error.png'"/> 很明显，我们可以看出，当src属...
img标签src路径为空就会出现边框，css怎么去掉
weixin_30808253的博客
07-09 1320
img[src=""],img:not([src]){opacity:0;} 转载于:https://www.cnblogs.com/qiao20/p/9282517.html
微信小程序 图片边框解决方法
08-31
在HTML中，`<img>`标签如果没有指定`src`属性或者`src`为空，浏览器为了显示占位符，会绘制一个默认的边框，通常是黑色的，以此表示这是一个图像占位符。在微信小程序中，由于其基于WXML和WXSS的渲染机制，这个问题...
img标签不给src就出现边框，解决办法
06-01
一般来说，如果 `img` 标签没有设置 `src` 属性，浏览器会默认显示一个带有边框的空白图片框。为了避免出现这种情况，可以通过以下两种方式来解决： 1. 使用 CSS 隐藏边框：可以通过设置 `border: none` 来隐藏边框...
img 标签为未获取到图片时默认加载内容占位
最新发布
05-31
1.使用CSS背景占位：通过设置img的样式，当src为空或无效时，显示背景图。设置width/height为0，用padding撑开，这样即使图片加载失败，占位图也能显示。参考引用[1]和[2]。2.使用伪元素添加占位图：通过:after伪...
img标签不给src就出现边框，解决办法 border:none，border：0都无效
06-01
这样可以将 `img` 标签设置为块级元素或者行内块级元素，使其不再显示默认的边框。例如： ```html <img src="" style="display: block; border:none"> <!-- 或者 --> <img src="" style="display: inline-block; ...
去除img默认的边框
weixin_30336061的博客
01-04 397
//当img属性src没有值时，会有难看的边框和难看的一个小图 有什么办法去掉呢？ <img src=" " /> //不要这样写 <img /> //这样写 然后，css如下 img:not([src]) { opacity: 0; } 可以去掉img的难看的边框和难看的一个小图 转载于:https://www.cnblogs.com...
js 调用代码
为天加朵云...
09-17 746
如何去除img标签的默认边框
WuJiangang5112的博客
06-21 1万+
如何去除img标签的默认边框 在使用img标签过程中遇到，图片没获取到后出现默认大小边框的问题，看起来很丑。 一、有边框 <router-link to="/"><img :src="logoICO" v-if="logoICO" width="100px" height="35px" />{{logo.title}}</...
img为空时不显示
11-09 2220
当img标签的src为空时，会显示一个破碎的图片，不好看。2、图片为空时用其他图片替代。1、图片为空时隐藏图片。
关于img标签浏览器自带的边框，清除边框的解决方式
热门推荐
鲸落
06-04 1万+
设置img[src=""],img:not([src]) { opacity: 0;} 就可以了
图片加载完之前 去除错误图标及灰色边框
weixin_47857693的博客
06-29 1304
页面中的img标签，在图片加载完之前浏览器找不到图，便用一个边框来代替方法： 设置空img的css样式 img[src=''], img:not([src]) { opacity: 0; } 属性选择器选中img中src为空的元素，反选伪类选择器选中 src没有的img元素，将其的opacity设置为0, 便可以去除边框线。去除错误图标：img标签 不写src属性就可。......
2021-08-31 清除img标签中，src为空时浏览器自带的图片边框
Kristen的博客
08-31 2280
清除img标签中，src为空时浏览器自带的图片边框 当img标签为空或为null时，图片四周将会出现浏览器自带的边框，可以通过css清除相应的边框： img[src=''], img:not([src]) { opacity: 0; } 其中img[ src=’ ’ ]是css选择器，选择了当图片src为’ '的情况； img:not([src])为css的not选择器，指选择了除含有src以外的所有img标签； 当遇上以上两种情况时，img标签设为透明，从而达到消除边框的目的 注：当src中含有内
如何解决img标签src为空或加载失败后的边框问题？
Something的博客
04-29 6752
img标签的src为空或者加载失败，浏览器都会自动加上一个边框，这会让人头疼，因为它一定程度上影响着网页的美观。。。 昨天我就遇见了这个问题，最后找到了自我觉得比较理想的方法。 （1）针对路径为空，网上还有js、绝对定位、margin聚焦等方法，个人认为这是最简单有效的方法（人太懒了，哈哈哈） img[src=""],img:not([src]){opacity:0;} /*这样可...
<img src=""> img标签的src为空的缺陷
qq_26199495的博客
08-03 1万+
在img 对象的src 属性是空字符串(“”)的时候，浏览器认为这是一个缺省值，值的内容为当前网页的路径。浏览器会用当前路径进行再一次载入，并把其内容作为图像的二进制内容并试图显示。 对于不同的浏览器测试后，发现对于有无src 或者src 是否为空的情况，还不尽相同，测试结果如下表。 代码 Firefox IE6 IE7<img src="" /> 会重复载入 会重复载入 会重复载入 <img
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值