使用json显示图像
问题描述:
所有工作到从mysql获取图像src,移动到js文件,直到html工作正常,但我想知道为什么(图片)选择器不显示我的图像在页面上。使用json显示图像
这是我的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>
答
问题是<img id="pic"/>
您已经定义了一个img id为pic
并在这一行$('#pic').text('<img src="' + imgs.img + '"width=160 height=160/>');
你试图通过pic
获得元素和插入文本,这是不正确。
<div id="pic"></div>
这将做的工作对你来说,插入的img标签里这个div usinf innerHTML
(JavaScript的)或.html()
(jQuery的)
即使我改变它,imgs.img用不了对象(SRC)在浏览器@MohdAsimSuhail – RAB
'console.log(imgs);''imgs'变量是一个数组,你应该迭代'imgs'数组来追加div。 '对于(var j = 0; j');}' –
shokran,它的工作 – RAB