[英]Display Image on HTML image using javascript
I am trying to display an image using javascript from mysql table and also using php. 我正在尝试使用mysql表中的javascript和php显示图像。 I have a table named ci_images
and has a fields id, ci_ID, ciCode, Title, image
. 我有一个名为ci_images
的表,并且具有字段id, ci_ID, ciCode, Title, image
。 After getting the rows using the code sql statement below, I want to display it using javascript. 使用下面的代码sql语句获取行后,我想使用javascript显示它。 But i am not getting the right result on this code. 但是我在这段代码上没有得到正确的结果。 It always returns an object in Console
of the browser (image). 它总是在浏览器的Console
中返回一个对象(图像)。 Please see code below 请参见下面的代码
FIELDS: 领域:
id - int
ci_ID - int
ciCode - VarChar
Title - VarChar
image - LongBlob
PHP: PHP:
<?php
include_once('pConfig.php');
if (!isset($cID)){
$cID = filter_input(INPUT_GET, "cIDs");
}
if (!isset($ciCODe)){
$ciCode = filter_input(INPUT_GET, "ciCodes");
}
$stmt = $db->prepare("SELECT * FROM ci_images WHERE ci_ID = ? AND ciCODe = ?");
$stmt->bind_param('is', $cID , $ciCode);
$stmt->execute();
$result = $stmt->get_result();
if (!$result) {
printf("Error: %s\n", mysqli_error($db));
exit();
}
$json = mysqli_fetch_all($result, MYSQLI_ASSOC);
echo json_encode($json);
?>
JAVASCRIPT: JAVASCRIPT:
function previewImages(cID){
var ciCode = window.localStorage.getItem('ciCode');
var xdata = ({'cIDs': cID, 'ciCodes': ciCode });
$.ajax({
type: 'GET',
url: '../back_php_Code/pPrevImages.php',
dataType: 'json',
data: xdata,
contentType: 'application/json; charset=utf-8',
success: function (response) {
var cells = eval(response);
alert(JSON.stringify(cells));
for (var i=0; i < cells.length ; i ++){
$('#iSet').append('<div class="col-lg-4 col-sm-6">'
+ '<div class="thumbnail">'
+ '<div class="thumb">'
+ '<a href="..\files\assets\images\gallery-grid\1.png" data-lightbox="9" data-title="' + + '">'
+ '<img src="'+ + '" alt="" class="img-fluid img-thumbnail">'
+ '</a>'
+ '</div></div></div>');
}
},
error: function (error) {
console.log(error);
}
});
}
Return on Console. 返回控制台。
Can someone help me to do the trick for this, I am stuck on this. 有人可以帮我解决这个问题,我坚持下去。
Thanks and Regards 谢谢并恭祝安康
Also, I have found something similar, but it does not work because , it only uses php and html. 此外,我发现了类似的内容,但由于它仅使用php和html而无法正常工作。 I think. 我认为。 Again Thanks 再次感谢
Link: 链接:
From PHP you are returning json string, so in javascript you do not have to eval the result, but decode it with JSON.parse
. 从PHP中,您将返回json字符串,因此在javascript中,您不必评估结果,而是使用JSON.parse
对其进行解码。
Other than that you are returing a single record, not a list, why you are doing a for loop in javascript? 除此之外,您要重新创建一条记录而不是列表,为什么还要在JavaScript中执行for循环?
Your code will become: 您的代码将变为:
function previewImages(cID) {
var ciCode = window.localStorage.getItem('ciCode');
var xdata = ({'cIDs': cID, 'ciCodes': ciCode });
$.ajax({
type: 'GET',
url: '../back_php_Code/pPrevImages.php',
dataType: 'json',
data: xdata,
contentType: 'application/json; charset=utf-8',
success: function (response) {
// here you transform your response in a js Object
var row = JSON.parse(response);
$('#iSet').append('<div class="col-lg-4 col-sm-6">'
+ '<div class="thumbnail">'
+ '<div class="thumb">'
+ '<a href="..\files\assets\images\gallery-grid\1.png" data-lightbox="9" data-title="' + row.YOUR_FIELD_FROM_DATABASE + '">'
+ '<img src="' + row.YOUR_FIELD_FROM_DATABASE + '" alt="" class="img-fluid img-thumbnail">'
+ '</a>'
+ '</div></div></div>');
},
error: function (error) {
console.log(error);
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.