Javascript - AJAX 显示表格中的图像

Question

I've already getting the file name of the image in my table using json which my code is $("show_product_img").val(data.picture); , now I want to show the image in my page. In my var urlimg is the link where my images are stored. So I will call the urlimg and get the file name of my image which is in $("show_product_img").val(data.picture);

How will I show the image in my page? BTW I'm using codeigniter framework, here's my code.

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>

Answer 1

<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>

Change JS ..

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

use this to set the image.

or simply..

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

Using jQuery

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