詳解img[src=""] img無路徑情況下，灰色邊框去除解決方法

1.Js解決辦法

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title></title>
 5     </head>
 6     <body>
 7     <img src="error.jpg" onerror="whenError(this)">
 8     </body>
 9     <script>
10     function whenError(a){
11         a.onerror=null;
12         a.src='path_default.jpg';
13         console.log('圖片出錯的時候調用默認的圖片');
14     }
15     </script>
16 </html>

2.絕對定位聚焦解決方案

 1 <!DOCTYPE html>
 2 <html>
 3  
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>absolute聚焦解決方案</title>
 7     </head>
 8  
 9     <body>
10         <p class="container-img">
11             <img class="common-icon login-icon" src="" width="38" height="38">
12         </p>
13  
14     </body>
15     <style type="text/css">
16         .container-img {
17             position: relative;
18             display: inline-block;
19             width: 36px;
20             height: 36px;
21             overflow: hidden;
22              
23         }
24         .container-img img {
25             position: absolute;
26             top: -1px;
27             right: -1px;
28             background: url(img/common-icon.png) no-repeat;
29             background-position: 0px 1px;
30         }
31     </style>
32  
33 </html>

3.margin聚焦解決辦法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>margin聚焦解決方案</title>
 6     </head>
 7  
 8     <body>
 9         <p class="container-img">
10             <img class="common-icon login-icon"  src="" width="38" height="38">
11         </p>
12  
13     </body>
14     <style type="text/css">
15         .container-img {
16             display: inline-block;
17             width: 36px;
18             height: 36px;
19             overflow: hidden;
20         }
21         .common-icon {
22             display: inline-block;
23             background: url(img/common-icon.png) no-repeat;
24             background-position: 0px 1px;
25             margin: -1px;
26         }
27     </style>
28 </html>

4.css隱藏

1 img[src=""],img:not([src]){
2     opacity: 0;
3     border:none;
4     visibility: hidden;
5     max-width: none;
6 }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 解決img的src屬性為空時會有邊框的情況去除img默認的邊框 img標簽src不給路徑就會出現邊框解決img的src為空時候，圖片有邊框問題 iH5中img標簽src不給路徑就會出現邊框————記一次二筆的編碼經歷 img 標簽注意默認img標簽，有一個1px的邊框 img{ border: 0; } 去除: 圖片img無地址時, 顯示的邊框 img標簽src路徑設置 HTML圖片標簽空白解決方法 css多個img標簽存在間隙的解決方法總匯