B4J Question B4J Problem Show Images (WebSocket)

Discussion in 'B4J Questions' started by johnerikson, Jan 23, 2015.

  1. johnerikson

    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>
     
  2. billzhan

    billzhan Active Member Licensed User

    Use
    Code:
    abs
    tags for codes.

    what's then contents in Dynamic.html?


    Code:
    '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
     
  3. johnerikson

    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!
     
  4. johnerikson

    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!
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice