How can I remove the border around an image without a source?

Question

I have an image, and I haven't defined the source yet. It has a border :/

eg: <img src="" />

If I give it a source, the border goes away (due to the css: border:none ).

How can I remove the border around an image when it doesn't have a source?

Answer 1

What I could suggest is in case not having a src="" remove it and you can

img {
    display: none;
}


img[src] {
   display: block;
 }

or if you know like the url contains some special word, like http you can do:

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

Answer 2

 <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=="); }

Answer 3

An image with a data: URL src attribute

<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

Answer 4

I would suggest to use text-indent: 100vw;

 .logo { text-indent: 100vw; }

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

Answer 5

visibility: hidden; keeps the space of the image empty. display: none; hide completely the image and there is no reserved space

Answer 6

This is my solution, work even if the image has no [src] attribute (ex. 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;
}

Answer 7

You could just hide it until you give it a src.

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

Or give it 0 size

img {
 height: 0;
 width: 0;  
}​

Answer 8

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.

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:

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

Answer 9

The src of your img tag can be 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;
}

Answer 10

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" />