Question

我有一张图片，我还没有定义来源。它有一个边框：/

例如：<img src="" />

如果我给它一个来源，边框会消失（由于css：border:none）。

如果图像没有来源，如何删除图像边框？

Answer 1

我建议的是，如果没有src =“”删除它，你可以

img {
    display: none;
}


img[src] {
   display: block;
 }

或者如果您知道该网址包含一些特殊字词，例如http，您可以这样做：

img[src*="http"] {
    display: block;
}

Answer 2

<img src="" width=50 height=50>

上面显示的损坏的图像占位符和后续边框是浏览器功能，无法设置样式。

您可以通过隐藏图像来解决此限制，或者如果您需要布局图像，则可以使用占位符图像或透明像素。

隐藏图片

img[src=""] { display: none; }

使用占位符图片或透明像素

img[src=""] { content:url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); }

Answer 3

包含数据的图片：URL src属性

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

根据您所需的浏览器支持，您还可以：

img[src=""] {
  content:url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
}

请参阅：http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

Answer 4

我建议使用text-indent: 100vw;

.logo {
  text-indent: 100vw;
}

<img class="logo" src="" alt="my logo" />

Answer 5

你可以隐藏它，直到你给它一个src。

img {
 height: 200px;
 width: 200px;
 visibility: hidden;    
}

或者给它0大小

img {
 height: 0;
 width: 0;  
}

Answer 6

这是我的解决方案，即使图像没有[src]属性（例如lozad.js）也可以使用。使用不透明性保留的空间。

// prevent borders around images without [src] value/attribute
img[src=""],
img:not([src]){
  opacity: 0;
}

img[src="*"]{
  opacity: 1;
}

Answer 7

使用alt属性：如果无法显示图像，则为图像指定替代文本。如果用户由于某种原因无法查看图像，则alt属性可提供图像的替代信息。

如果您不想在未加载图像的情况下显示任何替代文本，请将替代属性保留为空

img {
  width:50px;
  height:50px;
}

<img src="kansdkans" alt=" " />

如果您不想显示任何内容（如果未加载图像），请使用以下给定的CSS代码：

img {
    display: none;
}    
img[src] {
   display: block;
 }

工作示例：

img {
    display: none;
}
img[src] {
   display: block;
 }

<img src="adfcd.png" alt=""  height="100" width="100"/>  <!--nothing will be displayed because source is not found -->
<br>
<img src="https://banner2.kisspng.com/20171210/0a9/linux-logo-vector-5a2d217764a349.8093308915129071274122.jpg" alt=""  height="100" width="100"/>
<!--image will be displayed if the source is found-->

Answer 8

你的img标签的src可以是404 Err。在这种情况下，您可以使用follow as：

div.menu_avatar {
    width: 50px;
    height: 50px;
    overflow:hidden;
}
div.menu_avatar img{
    width:52px;
    height:52px;
    margin-left: -1px;
    margin-top:-1px;
}

Answer 9

只需删除src="";），它就会消失。

如何在没有源的情况下删除图像周围的边框？

9 个答案: