'display image in panel (jquery mobile)

I'm working on a mobile app using jquery mobile. I want to display an image in a panel along with a description and a title.

The title and description and the image are defined in JSON file like next :

var GpsData = [
    {
        "id": "13",
        "name": "Sahrij",
        "latitude": "34.046902",
        "longitude": "-4.9963",
        "altitude": "384",
        "description": ".....",
        "type": "medersa",
        "image": "assets/imgs/sud.jpg"
    }

In JS file I defined the ids :

$("#poi-detail-title").html(marker.poiData.title);
$("#poi-detail-image").html("<img src='" + marker.poiData.image + "'/>");
$("#poi-detail-description").html(marker.poiData.description);

The title and description are working fine but the image is not displayed :(

<div data-role="content">
    <!-- title -->
    <h3 id="poi-detail-title"></h3>

    <!-- description -->
    <h4 id="poi-detail-description"></h4>

    <!-- distance -->
    <h4>Distance: <a id="poi-detail-distance"></a></h4>
    <!-- image don't think is correct!!!!-->
    <div id="poi-detail-image"><img></div>
</div>

I'm guessing the error is in the content div !!!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source