Html 如何在没有来源的情况下删除图像周围的边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10441362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove the border around an image without a source?
提问by Tgwizman
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?
当图像没有来源时，如何删除图像周围的边框？
回答by Ricardo Rodrigues
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;
}
回答by Louis
<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=="); }
回答by Neil
An image with a data: URL src attribute
带有 data: 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
回答by Mo.
I would suggest to use text-indent: 100vw;
我建议使用 text-indent: 100vw;
.logo {
text-indent: 100vw;
}<img class="logo" src="" alt="my logo" />回答by Bill
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;
}?
回答by Bill
visibility: hidden;keeps the space of the image empty.
display: none;hide completely the image and there is no reserved space
visibility: hidden;保持图像的空间为空。
display: none;完全隐藏图像，没有保留空间
回答by Amaresh S M
Use alt attribute :It specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it.
使用 alt 属性：如果图像无法显示，它指定图像的替代文本。如果用户由于某种原因无法查看图像，则 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 anythingif 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-->回答by Rovente
This is my solution, work even if the image has no [src] attribute (ex. lozad.js). Space preserved using opacity.
这是我的解决方案，即使图像没有 [src] 属性（例如 lozad.js）也能工作。使用不透明度保留的空间。
// prevent borders around images without [src] value/attribute
img[src=""],
img:not([src]){
opacity: 0;
}
img[src="*"]{
opacity: 1;
}
回答by Rovente
The src of your img tag can be 404 Err. In this case, you can use follow as:
你的 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;
}
