Unable to render an img tag within a simple piece of HTML

[Alessandro Tucci]

Hello everybody,
I am trying to use CSSBox (ImageRenderer) to render a local HTML file into
a local PNG image.
The webpage_img_and_css.zip file contains the html page I'm trying to
render, together with the troublesome image and the CSS file.
When launching ImageRenderer, the webpage is rendered as in rendered.png:
that is, no image is shown. The box has the exact measures, but no image is
shown inside.
The image is referenced by an tag. The tag specifies only the
width, because in the production environment the renderer will have to deal
with variable-height images. Therefore, the mechanism cannot rely on fixed,
already known heights.
What am I doing wrong, there?

Thank you for your attention.
Alessandro Tucci

[Radek Burget]

Hi,
thanks for reporting this. There were several bugs in the image loading. Now, it's hopefuly fixed on GitHub and the fixes will be part of the next release.

[Alessandro Tucci]

Hi Radek,
thanks for your response.

After experiencing this issue with the Maven-packaged version, I cloned the Git repository (both CSSBox and JStyleParser, obviously), exported them as JARs and added them to my project, together with their dependencies. Unfortunately, the issue was detected in the Git version, too.
I also tried to disable caching by brutally setting "caching = false" in the constructor of BoxFactory, but with no success.

On the other hand, the Git version of CSSBox rendered correctly much more complex pages, therefore I think that adapting my brief HTML file to the CSSBox "quirks" would be easier. I blindly tried some solutions, but without success. Would you be able to give me a hint?

Thank you for your attention.

[Radek Burget]

Hi, if you're using the same HTML code for testing, please check the filenames of the images because there was some mismatch in your original example...

[Alessandro Tucci]

Hello,
it was just a let's-tidy-it-up-a-bit temporary mismatch.
The HTML I'm working on references the correct image and used to reference it correctly before "organizing" the content for the post.
Anyway, any common browser is showing it correctly, currently.
I'm trying to check whether the fact of putting an img into a table->tr->td might cause the problem. I read through CSSBox code and I find it quite unlikely, because the get/create phase is separated for each element. Anyway, it is worth an attempt.

[Radek Burget]

I have comitted another fix but I don't think it's related to your problem (it affected the positioned images only). Your example works fine for me now. Have you logging switched on? I attach a sample logback configuration - if you put it in your classpath, you should see more verbose log. It might show some more problems - e.g. image download timeouts?

[Alessandro Tucci]

Hello Radek,
I isolated the problem.
The log didn't say anything meaningful about the image: just a single log entry saying "14:41:43,962 DEBUG [web.domassign.Analyzer] Traversal of img null."

On the other hand, w.r.t. the following lines of code:

org.fit.cssbox.layout.ContentImage:122-131

            if (cache)
            {
                // get image and cache
                img = toolkit.getImage(url);
            }
            else
            {
                // do not cache, just get image
                img = toolkit.createImage(url);
            }

in both cases, the "img" variable contained something that looked like an "empty" image.
Therefore, I tried to run a test case, downloading the image from its original source and showing it into a JPanel:

            URL url = new URL("http://www.infoone.it/images/img.jpg");
            image = Toolkit.getDefaultToolkit().getImage(url);

The JPanel contained a 0x0 image.
Instead, if I try with:

            URL url = new URL("http://www.infoone.it/images/img.jpg");
            image = javax.imageio.ImageIO.read(url);

the image is shown correctly.
I am seriously thinking about the opportunity to insert this fix into "my" CSSBox and see whether it works. Would it be the case or did you already experienced issues with the ImageIO class?

[Alessandro Tucci]

Hello Radek,
I successfully patched CSSBox replacing the Toolkit reader with the ImageIO ImageReader, preserving the asynchronous loading mechanism with the approach described here: http://stackoverflow.com/questions/17933499/imageio-is-synchronized

If you're interested in my solution, just ask and I will be glad to provide you with patches and anything else

[Bruno Catarino]

Hey Alessandro,

I've been having the same problem as you since yesterday. Would you kindly share your fix, please?

Thank you

[Alessandro Tucci]

Hello Bruno,
this is the patch to be applied. The base directory is the root of the project.
As you will see, it is a decent compromise between a quick fix and an architecturally perfect solution.
In the meantime, I'm not committing/pushing anything without Radek's consent.

[Bruno Catarino]

Many thanks, I'll apply it until there an official fix.

[Radek Burget]

Hi Alessandro,
that's good news, many thanks for your effor. If ImageIO performs better, I have no problem with replacing the old implementation that has always caused problems. What version is the patch against? It doesn't seem to be the latest git master. Would it be possible for you to create a pull request on GitHub? Or I can just merge your changes manually and I'll mention you in CREDITS :-)

[Alessandro Tucci]

Hi Radek,
to be true, I downloaded CSSBox from an SVN repository. The repository URL is: svn://svn.code.sf.net/p/cssbox/code/trunk :S

[Alessandro Tucci]

Hello Radek,
I managed to merge my code into the Git trunk.
I had to handle the management of the "complete" boolean.
I'll try to make the pull request within today.

[Radek Burget]

Hi Alessandro, that's great! If you don't have time for playing with github, you may just send me the changed files and I can create the commit manually. If you have some e-mail registered on github, I guess I can even make you the author of the commit. Many thanks!