Replace broken image icon with text

Question

I want to hide or remove the broken image icon whenever it pops up and replace that with text that reads: "Error with image." Right now, I have some jQuery that hides the broke image icon, but I cannot set and show the alt text this way. Do I need to have a replacement image or is there a way to show text whenever a broken image icon is hidden?

This is the jQuery code:

<script type="text/javascript">
    $(document).ready(function () {
        $("img").error(function () {
            $(this).hide();
        })
    .attr("src", "error with image");
    });
</script>

These are the fields in the table that are meant to show the image thumbnails:

<asp:ImageField HeaderText="Line dwg Thumb" DataImageUrlField="LineDrawThumbnail" NullDisplayText="error with image"  ControlStyle-Width="75px" ItemStyle-HorizontalAlign="Center">
 </asp:ImageField>
 <asp:ImageField HeaderText="Profile Thumb" DataImageUrlField="ProfileThumbnail" NullDisplayText="error with image" ControlStyle-Width="75px"  ItemStyle-HorizontalAlign="Center">
  </asp:ImageField>           

Important side note: The database table that has the thumbnail images does not have any empty field for Profile Thumbnail or Line Draw Thumbnail--it just so happens that sometimes the thumbnail does not exist yet.

Answer 1

Your script is perfectly fine all you need to do is add text after you hide image

<script type="text/javascript">
    $(document).ready(function () {
        $("img").error(function () {
            $(this).hide();
        })
    .after('<p>error with image</p>');
    });
</script>