How to replace non-existing images with a default one in css?


Tags: javascript,html,css,image

Problem :

I have a table of 10 rows which has an image of a user in first column:

<table>
  <tr><td><img src='images/35067.png'/></td></tr>
  <tr><td><img src='images/35089.png'/></td></tr>
  .... <!-- more rows -->
</table>

the image file name is generated by the [id] of its data record within mysql. some users have no image assigned to them and the file dose not exists in the [images/] path. i would like to replace the invalid images with a default existing image like

src='images/default.png'

i have some conditions that the action must be done on the client side, not on server-side and it could be done aether with CSS or java-script.



Solution :

This would work

<img src='images/35067.png' onerror='this.src="images/default.png"'/>

    CSS Howto..

    How do I show a handle to indicate to the user that a panel is resizable?

    Html and CSS for emails, how to, where to?

    How to center three DIVS with other HTML tags inside one parent DIV [duplicate]

    how to set image for anchor tag in mvc through css?

    Does Modernizr.js help in showing css 3 and html 5 on older browsers and how?

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How to add css to Vaadin / Maven project?

    I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

    how to align div's horizontally in CSS

    How do I float a
  • to the right in CSS?
  • CSS Shadows (how to get rid of top shadow?)

    How to force Jade not to indent block tag?

    How to select div with id nested in another div with class in css

    How can i Convert left vertical menu to right?

    How to set link color inside GridView cell

    How can I make my
    fit vertically into a parent div?

    How to set vertical align middle for a div enclose another div

    There is a little gap between the image and the overlay, I do not know how to fix it [duplicate]

    Show text underneath image while hovering without disrupting other elements

    How to slide down to show content of DIV using CSS/jQuery?

    How to create footers in CSS

    How do i shift the text in twitter bootstrap navbar to center?

    How to create dynamic CSS class in in extjs or javascript

    CSS Sprites - How to leave Hover button in depressed state

    How to keep images fixed but also responsive so they don't overlap

    how to edit the width of menu bar in dreamweaver

    CSS - How to make
    side by side not wrap when user make browser size changing?

    How to place inline-block divs one per line with CSS? [closed]

    Can somebody explain how I should use @font-face for my site?

    How to add border for html tr