B4J Question B4J Problem Show Images (WebSocket)

johnerikson

Active Member
Licensed User

Something goes wrong because the image not shows on screen, only the title and the word Bild!


How to solve this problem? Perhaps I use wrong methods?

I Try this code below build on the B4J-Server example.
Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
ws = WebSocket1
Dim m As Map
Dim base As String = File.ReadString(File.DirAssets, "Dynamic.html")
Dim sHtm As String
m.Initialize
'm.Put("ImageID",File.GetUri(File.DirApp , "viewcamper.png")) ' no diffrent
m.Put("ImageID",File.DirApp & "/viewcamper.png")
sHtm = WebUtils.ReplaceMap(base, m)
Log (sHtm)​
MainDiv.SetHtml(sHtm) 'no image shows​
End Sub

Index.html like this
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta content="text/html;charset=windows-1252" http-equiv="Content-Type" />
<title>Camper Viewer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="/b4j_ws.js"></script>​
</head>
<body>
<h1>Web Images Viewer Exampel (WebSocket)</h1>
<p id="plog"></p>
<div id="maindiv">
</div>
<script>
$( document ).ready(function() {
b4j_connect("/dynamic/ws");
});
</script>​
</body>
</html>

And Dynamic.html as below
<p><img align="middle" alt="Bild" src="$ImageID$" style="width: 900px; margin-right: 0px;" /></p>
 

billzhan

Active Member
Licensed User
Use
B4X:
tags for codes.

what's then contents in Dynamic.html?


B4X:
'html :

...
<body>
...
<img id="imgtesting"   border="0" /> 
...
</body>
...


'server
...
Dim imgtesting As JQueryElement
...
Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
 ...   
    imgtesting.SetProp("src","/images/sort_desc.png")
...
End Sub

'image path: b4j server www folder : www/images/sort_desc.png
 

johnerikson

Active Member
Licensed User
Thanks for rapid response!

This is the content in Dynamic.html
< p><img align="middle" alt="Bild" src="$ImageID$" style="width: 900px; margin-right: 0px;" /></p>

If I replace $ImageID$ on above html statement with the pathname to the picture en double click on Dynamic.html file, I can see the image on screen.
I thought code: MainDiv.SetHtml(sHtm) had the same function as that.

I'm going to test your suggestion above!
Thanks again!
 

johnerikson

Active Member
Licensed User
I solved it!
The solution was to change m.Put("ImageID",File.DirApp & "/viewcamper.png")
to m.Put("ImageID", "viewcamper.png"). I discover it's important that the image and html-file
is placed on same directory!
 
Top