42

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

例如：<img src="" />

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

当图像没有来源时，如何删除图像周围的边框？

4

9 回答 9

38

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

img {
    display: none;
}


img[src] {
   display: block;
 }

或者如果你知道 url 包含一些特殊的词，比如 http 你可以这样做：

img[src*="http"] {
    display: block;
}
于 2012-08-10T10:42:13.500 回答
33 

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

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

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

隐藏图片

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

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

img[src=""] { content:url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); }
于 2012-05-04T01:09:20.040 回答
26

带有数据的图像： 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

于 2014-06-24T18:12:23.333 回答
15

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

.logo {
  text-indent: 100vw;
}
<img class="logo" src="" alt="my logo" />

于 2016-02-16T10:58:45.770 回答
5

visibility: hidden;保持图像空间为空。 display: none;完全隐藏图像并且没有保留空间

于 2015-05-11T15:24:11.207 回答
4

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

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

或者给它 0 大小

img {
 height: 0;
 width: 0;  
}​
于 2012-05-04T01:06:34.353 回答
4

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

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

img[src="*"]{
  opacity: 1;
}
于 2020-04-21T10:20:10.507 回答
3

使用 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-->

于 2019-07-26T11:18:28.007 回答
0

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

div.menu_avatar {
    width: 50px;
    height: 50px;
    overflow:hidden;
}
div.menu_avatar img{
    width:52px;
    height:52px;
    margin-left: -1px;
    margin-top:-1px;
}
于 2016-09-24T03:47:20.973 回答