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?

What do you mean by "it doesn't have a source"? That you have an empty `` ? — lu1s, May 04 '12 at 01:04
I don't think you can, best to just add in the src or not have the image tag, or set its width/height to 0 unless there is a src available. You could also use a transparent image as a placeholder. — lsl, May 04 '12 at 01:05
@Louis Works great! Post that as an answer, and I'll use it! Thanks :D — Tgwizman, May 04 '12 at 01:06
Done, but I think this is a dupe. http://stackoverflow.com/questions/6497992/removing-img-border — lsl, May 04 '12 at 01:10

score 47 · Accepted Answer · answered Aug 10 '12 at 10:42

47

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

answered Aug 10 '12 at 10:42

Ricardo Rodrigues

2,633
5
29
31

4

No problem .. at least can be useful for others :D – Ricardo Rodrigues Aug 17 '12 at 14:48
1

Its kind of sad people with the selected answer to the question can't gift it to another answer when the user who asked isn't around to update the question.. – lsl Jul 22 '14 at 01:24
Late Response: The first answer worked just fine. Setting the width/height to 0px allows the image to be "invisible". – Tgwizman Oct 12 '16 at 12:46
1

Nice answer! I'm still able to click on the img, which is what I needed. – Code4R7 Aug 11 '21 at 18:51
1

Just came across this problem. Small improvement: I think it's better to use `visibility: hidden` rather than `display: none` in order to prevent layout shifts. – Michael Feihstel Feb 11 '22 at 10:23

score 33 · Answer 2 · answered Jun 24 '14 at 18:12

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

score 16 · Answer 3 · answered Feb 16 '16 at 10:58

16

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

.logo {
  text-indent: 100vw;
}

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

answered Feb 16 '16 at 10:58

Mo.

26,306
36
159
225

@fentas It is simply move the text position with `text-indent` properties. You can see the difference if you change the `text-indent` value – Mo. Jun 28 '16 at 09:44
@QMaster can you try opposite value `text-indent: -100vw;` ? – Mo. May 04 '17 at 12:26
1

watch out for hacks like this as the browser will render all that space, better try with low numbers until u achieve your goal – ctf0 Feb 05 '18 at 05:47

score 7 · Answer 4 · answered Apr 21 '20 at 10:20

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

score 5 · Answer 5 · answered May 11 '15 at 15:24

5

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

answered May 11 '15 at 15:24

It does work, but without visibility I can't click on the image anymore. For this purpose I'm using `opacity:0;` instead. – Code4R7 Aug 11 '21 at 18:52

score 3 · Answer 6 · answered May 04 '12 at 01:06

3

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

answered May 04 '12 at 01:06

Bill

25,119
8
94
125

Amaresh S M · Answer 7 · 2019-07-26T11:38:44.367

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

score 1 · Answer 8 · answered Jun 16 '22 at 12:06

1

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

answered Jun 16 '22 at 12:06

Mo.

26,306
36
159
225

score 0 · Answer 9 · answered Sep 24 '16 at 03:47

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

score 0 · Answer 10 · answered Dec 20 '22 at 23:01

0

If you want to preserve the space and avoid jumpy UI you can also try this:

img {
    opacity: 0;
}
img[src] {
    opacity: 1;
 }

answered Dec 20 '22 at 23:01

Burak Aktas

21
1
3

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

10 Answers10

Linked

Related