使用JSON显示图像

Question

All work to fetch image src from mysql , moving to js file till html work fine but I'm wondering, why the (pic) selector does not display my image on the page. 所有工作都可以从mysql提取图像src ，移动到js文件，直到html可以正常工作，但是我想知道为什么（pic） 选择器不能在页面上显示我的图像。

This is my php file which fetch all images from mysql database related to marker selected . 这是我的php文件，它从mysql数据库中获取与所选标记相关的所有图像。

This is the result shown in browser 这是浏览器中显示的结果

    <?php
    $dbhost = '127.0.0.1';
    $dbuser = 'root';
    $dbpass = '';
    $dbname = 'maalem';


    $sql2 = "SELECT img FROM image WHERE L_ID=:id";
    try {
        $con = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
        $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $con->query('SET NAMES utf8');
        $stmt = $con->prepare($sql2);  
        $stmt->bindParam("id", $_GET["L_ID"]);
        $stmt->execute();
        $img = $stmt->fetchAll(PDO::FETCH_OBJ); 
        $con = null;
        echo '{"pics":'. json_encode($img) .'}'; 
        } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
    ?>

//this is the javascript file 



    $('#detailsPage').live('pageshow', function (event) {
    var id = getUrlVars()["L_ID"];
    $.getJSON(serviceURL + 'getmarker.php?L_ID=' + id, displayimg);
    });


    function displayimg(data) {
     var imgs = data.pics;
     console.log(imgs);
    $('#pic').append('<img src="' + imgs.img + '"width=160 height=160/>');

    $('#actionList').listview('refresh');

     }


    function getUrlVars() {
    var vars = [],
    hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
     }

//HTML file 

   <!DOCTYPE HTML>
   <html>
    <head>
    </head>

    <body>

        <div id="detailsPage" data-role="page" data-add-back-btn="true">

            <div data-role="header">
                <h1 id="Name"></h1>
            </div>

            <div data-role="content"> 


                <div id="markerDetails">
                    <h2> الوصف </h2>
                    <p id="Dec"></p>
                    <div id="pic"></div>
                </div>



            </div>

        </div>

    </body>

Answer 1

Problem is <img id="pic"/> you have defined an img with id pic and in this line $('#pic').text('<img src="' + imgs.img + '"width=160 height=160/>'); 问题是<img id="pic"/>您已定义了ID为pic的img，并在此行$('#pic').text('<img src="' + imgs.img + '"width=160 height=160/>'); you are trying to get element by pic and insert a text, which is incorrect. 您尝试按pic获取元素并插入文本，这是不正确的。

<div id="pic"></div> this will do the work for you, insert img tags inside this div usinf innerHTML (javascript) or .html() (jQuery) <div id="pic"></div>这将为您完成工作，在此div中插入img标签，使用usinf innerHTML （javascript）或.html() （jQuery）

使用JSON显示图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-02-12 18:40:20

使用JSON显示图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-02-12 18:40:20

解决方案1
0 已采纳 2017-02-12 18:40:20