[英]How can I remove the border around an image without a source?
I have an image, and I haven't defined the source yet.我有一张图片,但我还没有定义来源。 It has a border :/它有一个边框:/
eg: <img src="" />
例如: <img src="" />
If I give it a source, the border goes away (due to the css: border:none
).如果我给它一个来源,边界就会消失(由于 css: border:none
)。
How can I remove the border around an image when it doesn't have a source?当图像没有来源时,如何删除图像周围的边框?
What I could suggest is in case not having a src="" remove it and you can我可以建议的是,如果没有 src="" 删除它,你可以
img {
display: none;
}
img[src] {
display: block;
}
or if you know like the url contains some special word, like http you can do:或者如果你知道 url 包含一些特殊的词,比如 http 你可以这样做:
img[src*="http"] {
display: block;
}
<img src="" width=50 height=50>
The broken image placeholder and subsequent border shown above is a browser feature and can't be styled.上面显示的损坏的图像占位符和后续边框是浏览器功能,无法设置样式。
You can work around this limitation by hiding the image or if you need it for layout you can use a placeholder image or transparent pixel.您可以通过隐藏图像来解决此限制,或者如果您需要它进行布局,您可以使用占位符图像或透明像素。
Hide the image隐藏图片
img[src=""] { display: none; }
Using a placeholder image or transparent pixel使用占位符图像或透明像素
img[src=""] { content:url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); }
An image with a data: URL src attribute带有数据的图像: URL src 属性
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
Depending on your browser support required you could also:根据您需要的浏览器支持,您还可以:
img[src=""] {
content:url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
}
See: http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever见:http: //probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
I would suggest to use text-indent: 100vw;
我建议使用text-indent: 100vw;
.logo { text-indent: 100vw; }
<img class="logo" src="" alt="my logo" />
visibility: hidden;
keeps the space of the image empty.保持图像空间为空。 display: none;
hide completely the image and there is no reserved space完全隐藏图像并且没有保留空间
This is my solution, work even if the image has no [src] attribute (ex. lozad.js).这是我的解决方案,即使图像没有 [src] 属性(例如 lozad.js)也可以使用。 Space preserved using opacity.使用不透明度保留的空间。
// prevent borders around images without [src] value/attribute
img[src=""],
img:not([src]){
opacity: 0;
}
img[src="*"]{
opacity: 1;
}
You could just hide it until you give it a src.你可以隐藏它,直到你给它一个 src。
img {
height: 200px;
width: 200px;
visibility: hidden;
}
Or give it 0 size或者给它 0 大小
img {
height: 0;
width: 0;
}
Use alt attribute :It specifies an alternate text for an image, if the image cannot be displayed.使用 alt 属性:如果图像无法显示,它指定图像的替代文本。 The alt attribute provides alternative information for an image if a user for some reason cannot view it.如果用户由于某种原因无法查看图像,则 alt 属性提供图像的替代信息。
If you u don't want to display any alternative text if the image is not loaded then leave the alternative attribute empty如果您不想在未加载图像的情况下显示任何替代文本,则将替代属性留空
img { width:50px; height:50px; }
<img src="kansdkans" alt=" " />
If you don't want to display anything if the image is not loaded then use the below given css code:如果您不想在未加载图像的情况下显示任何内容,请使用以下给定的 css 代码:
img {
display: none;
}
img[src] {
display: block;
}
Working Example:工作示例:
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-->
The src of your img tag can be 404 Err.你的 img 标签的 src 可以是 404 Err。 In this case, you can use 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;
}
Simple solution简单的解决方案
.logo { text-indent: 100vw; }
<img class="logo" src="" alt="my logo" />
Another solution另一种解决方案
.logo { color: transparent; }
<img class="logo" src="" alt="my logo" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.