Bug 146383 – If src is empty in img tag it shows a gray border around the image

• Component: Images
• Status: REOPENED

[paladox]

Hi if you have src empty for example <img class="class" <!-- no src="" --> /> it shows a gray border around the image. Internet Explorer doesent show a gray border arrounf the img if the src is empty.

[paladox]

Hi is there any update on this please?

[Said Abou-Hallawa]

I tried to look for the specs of drawing the broken images but I could not find this part. WebKit, Chrome and FireFox intentionally draw this gray rect for the broken image. WebKit does that in RenderImage::paintReplaced() below the the statement:

 if (!imageResource().hasImage() || imageResource().errorOccurred()) 

This request is little bit strange. What exactly you are trying to achieve? If drawing the gray rect is bothering you, you can set the width and/or the height of the image to zero. When the src attribute is set to the image, the width and the height can be changed to the desired size. If you want to keep the empty space of the broken image but not to draw the gray rectangle, you can put the <img> inside a box with the desired size but set the width and the height of the image itself to zero.

I attached a test case showing two broken images, one image has size = (100, 100) which shows the gray rectangle. The other image has size = (0, 0) but it is inside a box with size = (100, 100).

[Said Abou-Hallawa]

Created attachment 294982 [details]
test case

[Said Abou-Hallawa]

Reopen if you think you have a valid test case for this request.

[Said Abou-Hallawa]

Created attachment 294983 [details]
test case

[Said Abou-Hallawa]

Created attachment 294987 [details]
test case

[paladox]

Hi I am trying to get img to work without having to set src. I am trying to use css background-image property to set the image but when I doint set the src, it creates a grey border. But on Internet Explorer this works (uses different web engine).

[Jon Lee]

So what are you doing on other browsers that also show a gray border?

[paladox]

(In reply to comment #8)
> So what are you doing on other browsers that also show a gray border?

I'm trying to not set src because I have created a patch for gerrit but I not really know how to program in java so I just had to re use a public function that allowed me to get the image I wanted. But the image was inside a background-image: css property. But if I only add a class to img and doint set a valid image in src, it will show a grey border. I would really like it if the grey border could be removed please?

See here https://gerrit-review.googlesource.com/#/c/91471/10/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Labels.java

scroll to line

203

and

211

I had to set that src with a blank image otherwise a grey border will show.

But it is unlikely they will merge the patch since that is just a work around.

Line 202 is where I set the class for the image

same for line 210

[Said Abou-Hallawa]

(In reply to comment #7)
> Hi I am trying to get img to work without having to set src. I am trying to
> use css background-image property to set the image but when I doint set the
> src, it creates a grey border. But on Internet Explorer this works (uses
> different web engine).

You should not use the <img> element in this case. You can apply the css background-image property to any other element like <span> or <div> for example. The background image is rendered by the same routine for all elements.

[paladox]

Oh I tryed using that but it just moves the other elements out of place.

But Internet Explorer dosent get a grey border if you do this.