jquery 以引导模式显示图像,并动态填充表单

ylamdve6  于 2023-05-28  发布在  jQuery
关注(0)|答案(1)|浏览(153)

我一直在看教程和张贴的问题,试图锻炼如何做到这一点,没有任何运气。
我正在编写一个脚本,它加载一个Bootstrap模式,其中包含一个从JSON结果自动填充的表单。该表单允许用户编辑显示的记录并将其保存。我还有最后一件事要完成。加载的记录包含一个图像的名称,我需要在表单中显示该图像。
调用数据的代码:

success:function(data) {
    var result = JSON.stringify(data);
    result = JSON.parse(result);
    console.log("DATA", result );
    $('#Editrecordid').val(result[0]);
    $('#Editpromotionname').val(result[1]);
    $('#Editboard').val(result[2]);
    //$('#board option[value=(.+ result[2] +.]').prop('selected', true);
    $('#Editscreenlocation').val(result[3]);
    if(result[4] == 'L') {
       $('#Editorientation').val('Landscape');
    } else {
       $('#Editorientation').val('Portrait');
    }
    
    // THE VAR BELOW CONTAINS THE PATH TO THE IMAGE FILE ON THE SERVER
    var imagepath = '../../../../signage/promotion_images/'+ result[15] +'/'+ result[2] +'/'+ result[5];
    console.log("Image path", imagepath);
    // I END UP THE THE BELOW DIV ID POPULATED WITH THE PATH AND IMAGE NAME
    $('#Editpromotionimage').val(imagepath);
    
    $('#Editmediatype').val(result[6]);
    $('#fromdate').val(result[7]);
    $('#fromtimeh').val(result[8]);
    $('#fromtimem').val(result[9]);
    $('#todate').val(result[10]);
    $('#totimeh').val(result[11]);
    $('#totimem').val(result[12]);
    $('#displaywidth').val(result[13]);
    editw = result[13];
    console.log("editw",editw);
    $('#displayheight').val(result[14]);
    edith = result[14];
    console.log("edith",edith);

    $('#insert').val("Update");
    $('#Editlandscape0').hide();
$('#edit_data_Modal_2').modal("show");
}

如果我临时有一个文本框的形式:

<input type="text" class="timetext" name="EditImagePath" id="Editpromotionimage" value="">

出现正确的路径和文件名。
我的问题是如何显示实际图像?

iezvtpos

iezvtpos1#

您可以创建一个img标签并以这种方式附加它,因此只需将img标签添加到您希望它在模态中显示的位置。

<img id="Editpromotionimage" class="img-responsive">

使用jQuery:

$("#Editpromotionimage").attr("src",imagepath);

相关问题