Geek Answers Handbook

How to stop broken images showing

I have a table with some images that I want to start without any images in them. I set src = "". But when viewed in a browser, it shows photos with a broken image.

<tr>
<td><img src=""> </td>
<td><img src=""> </td>
<td><img src=""></td>
</tr>

How can I prevent the browser from showing photos with a broken image or X or something else until I put some data in the src attribute.

+5
source share
11 answers

Just don't put those items img. They have no semantic meaning. In addition, you should read this article: An empty src image could destroy your site on NCZOnline

, Javascript . img , (. MDC appendChild()).

(, - (style="display: none;") Javascript, src. .

+8

,

<img src="broken.png" onerror="this.style.display='none'" />
+19

- alt

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

+9

, .

( , - src, URL-):

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

, , , .

+4

, : (, script).

<img src="broken.png" onerror="this.parentNode.removeChild(this)">
+1

,

img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:after {  
  content: attr(alt);
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

https://bitsofco.de/styling-broken-images/

+1

. $('someelement').append("image");

0

src ; , img.

background-image.

0

Id CSS, :

<img src="" style="visibility: hidden;">

JavaScript URL- :

yourImgObject.src = 'IMAGEURL';
yourImgObject.style.visibility = 'visible'
0

:

<img src="http://someurl.com" width='0' height='0'>

? - URL-, , , . , (html- Google), .

0

src tarnsparent . . GIF PNG 1x1px.

-1

More articles:


All Articles