BlackBerry embedded browser: image display using HTML

Question

I'm developing a BlackBerry app which uses an embedded browser to display html content.
Testing application on Torch I've realized that only project embedded images are displayed by browser, while I've got problems accessing image resource files stored on removable SD card or internal file system.
The same application running on Curve displays correctly all the images.
Here is a fragment of code:

    browser = new BrowserField();

    Strimg img_1 = "file:///store/home/user/yellow.png";
    Strimg img_2 = "file:///SDCard/green.png";
    Strimg img_3 = "file:///local/images/red.png";

String  imgTag_1 = "<img src=\"" + img_1 + "\">"; // Stored on file system - Not displayed by Torch
String  imgTag_2 = "<img src=\"" + img_2 + "\">"; // Stored on SDCard - Not displayed by Torch
String  imgTag_3 = "<img src=\"" + img_3 + "\">"; // Embedded image

String browserContent = "<html>" + imgTag_1 + imgTag_2 + imgTag_3 + "</html>";

byte[] contentBytes;        
try {
    contentBytes = browserContent.getBytes("UTF-8");
    browser.displayContent(contentBytes, "text/html; charset=UTF-8", "http://mysite.com");
} catch (UnsupportedEncodingException e) {
    e.printStackTrace();
    browser.displayContent(browserContent, "http://mysite.com");
}

aVerticalManager.add(browser);

I'm using JRE 5 both for Curve and Torch. Using FileConnector to accessing file works fine.

Any suggestions on how to display images both on Torch and Curve? Thanks

rosco rosco · Accepted Answer · 2012-02-01T08:34:38

Solved!
Hereafter the code describing how I did it:

browser = new BrowserField();    
String img_1 = "file:///store/home/user/yellow.png"; // File Sistem

byte[] byt_1    = MyUtilClass.readBytesFromFile(img_1);
char[] base64_1 = MyUtilClass.Base64.encode(byt_1);

// Sample of generating HTML: <html><img src="data:image/bmp;base64,Axcfhhòjbnesohokòbw...."></img></html>
String imgTag_1 = "<html><img src= \"data:image/bmp;base64,"+ String.valueOf(base64_1) + "\" ></img></html>";

byte[] contentBytes;       

contentBytes = imgTag_1.getBytes("UTF-8");

// Inject HTML in browser
browser.displayContent(contentBytes, "text/html; charset=UTF-8", "http://mysite.com");

So, this works fine on Torch, but I have poor performances on Curve. I'll specialize the behaviour depending on device type.

if ( Curve == true ) {
// Use: <img src=file:///store/home/user/yellow.png>
} else  {
// Use: <img src="data:image/bmp;base64,Axcfhhòjbnesohokòbw...."></img>
}

I know that is a workaround, but it works!

BlackBerry embedded browser: image display using HTML

1 Answers