Image not visible in page preview

[Jakub Ś]

This issue was reported by Srinivas Nalla on our support channel.

TC provided by a user:

Steps to Re-Produce the Issue.

1. Place an Image Tag with wrong image name
2. Find that image missing icon is displayed in IE 8 but missing in Firefox

I have got similar but not the same result. Image missing icon was visible in CKEditor content area but not in Page preview.

At first I thought that this is a browser issue but it is reproducible from CKEditor 3.6 so it looks like an editor problem.

[Jakub Ś]

TC provided by user.

[Jakub Ś]

Checked the issue agian and got the same results as Srinivas Nalla - No missing image icon in content area and page preview in Firefox Browsers. It also seems that this issue is reproducible in Firefox browsers from CKEditor 3.0

[Jakub Ś]

Checked the whole issue
once more. It seems that every time I get different results. This time I have checked it couple of times just to make sure.

Results:
Image missing icon in content area - You can see missing icon mark.
Image missing icon in page preview - There is no missing image icon visible.
What is more I have checked missing images in plain HTML page - without any CKEditor logic - the results were the same - no missing icon image.

It seems that this is the way how Firefox is handling missing images. The only way to see something is to fill alt attribute - that way Firefox will show text on page.

Personally I’m not sure if this can be fixed as it seems like a browser issue.

[Alfonso Martínez de Lizarrondo]

I can't reproduce this issue.

In content area the wyiswygarea plugin inserts this code to show broken images in Firefox:

img:-moz-broken { -moz-force-broken-image-icon : 1;	width : 24px; height : 24px; }

And in the image dialog I get the big X with red background if I try to use a non-existing image.

Tested in ​http://nightly.ckeditor.com/latest/ckeditor/_samples/replacebyclass.html with Firefox 7.0.1 and 8beta

[Jakub Ś]

Damn this bug. I seem to be getting different results every time I test this ticket.

@alfonsoml

In content area the wyiswygarea plugin inserts this code to show broken images in Firefox

Yes that is correct. There is an Firefox image missing icon.

And in the image dialog I get the big X with red background if I try to use a non-existing image.

Yes that is correct. There is the big X.

---

The problem is with page Preview. Missing image icon is not visible there.
My current results:
Till CKEditor 3.5.4 missing image icon was visible in Page Preview.
From CKEditor 3.6 rev [6904] missing image icon is no longer visible in Page Preview
@alfonsoml can you confirm my current results?

What got me confused it that when I paste in the below code in plain HTML page in Firefox:

<img alt="" src="http://192.168.1.100:8080/c.jpg"/>
<img alt="test" src="http://192.168.1.100:8080/c.jpg"/>

I get only test description in second case. That is why I thought that this is browser issue.

[Alfonso Martínez de Lizarrondo]

Ok, then everything is clear.

As you said this is a browser issue: Firefox doesn't show the broken image icon if there's no image and there's a little css magic to make that icon appear that we're using while editing.

Previously that was placed in the default content.css file but that meant that when the user changed the config to his own css this style wasn't applied and he didn't see the broken image while editing.

Then that code was moved to the wysiwygarea plugin so it's always inserted into the editor document and that means that now the preview page with this default styles won't show the broken image, just like happens in a normal static page if there's an invalid image.

To recap it again: up to 3.6 the default contents.css included a rule for Firefox to force the broken image and then it was moved so it's always inserted in the edited document. That means that now the page preview won't show broken images, just like happens in any other page in Firefox.

Previously when the user customized the config for content css the broken images were not displayed while editing and in page preview, and I don't expect real sites to use the default css instead of using their own.