Images in web apps

Question

I'm working on a web application and I'm using the img tag (<img...>).

When the src property is empty, it shows the red x figure indicating that there is no image.

Is there any way to hide that red X icon?

Answer 1

How about not printing the image?

Answer 2

There's no need adding img tags if you set src to empty string.

Answer 3

An <img /> tag without an src attribute is invalid HTML. If you do not want to display an image, do not output the <img />tag at all.

If you must output the image tag, thus breaking your html (I wouldn't encourage this), you can hide the [X] in most browsers with one of the following css styles:

1. <img style="visibility: hidden"/> which hides the image, but still has it taking up space in the page
2. <img style="display: none"/> which removes the image from the page, making it take up no layout space

The other alternative is to actually link to an image that won't be seen. The classic example of this is to use a 1 pixel transparent gif image. The image won't be visible, although it will effect the page layout.

Answer 4

If you don't want to print the image, but show it on the screen you can use CSS media types:

<style>
@media print
  {
  img.noprint {visibility: hidden}
  }
</style>

and then add a class to all the images you do not want printed

<img class="noprint" .../>