Javascript - AJAX显示表格中的图像

时间:2016-09-11 15:11:08

标签: javascript jquery json ajax codeigniter

我已经使用json获取了我的表中图像的文件名,我的代码是$("show_product_img").val(data.picture);,现在我想在我的页面中显示图像。在我的var urlimg中是存储图像的链接。所以我会调用urlimg并获取$("show_product_img").val(data.picture);

中我的图片的文件名

如何在我的页面中显示图像?顺便说一下,我正在使用codeigniter框架,这是我的代码。

AJAX

var prodid = $("#prod-names option:selected").attr("value");
var url = "http://localhost:800/client_ayos/administrator/createpromoajax/"+prodid;
var urlimg = "http://localhost:800/client_ayos/uploads/"; //this is where the images are stored
var type = "GET";

$.getJSON( url,type, function(data) {
    console.log(data);
    $("#orig-price").val(data.price);
    $("#supplier").val(data.supplier); 
    $("show_product_img").val(data.picture);
}

HTML

<div class="form-group" id="product_img" hidden>
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Product Image</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <img  id="show_product_img" class="form-control" />
        </div>
</div>

1 个答案:

答案 0 :(得分:0)

<div class="form-group" id="product_img" hidden>
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Product Image</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <img  id="show_product_img" class="form-control" />
        </div>
</div>

改变JS ..

var image = document.getElementById("show_product_img");
image.src = data.picture;

用它来设置图像。

或只是..

document.getElementById("show_product_img").src = data.picture;

使用jQuery

$("#show_product_img").attr("src",data.picture);