easyui中图片显示总结

本文转载自

https://blog.csdn.net/killmanback/article/details/79863368

一、easyui-datagrid中单元格显示图片
jsp中代码：

<table id="dg" title="" class="easyui-datagrid" fit="true" url="FdPeople_query.do"  
   toolbar="#toolbar" pagination="true"  rownumbers="true" fitColumns="true" 
      singleSelect="true" striped="true" nowrap="false">
        <thead>
          <tr>
            <th align="center" data-options="field:'fdCreditInformation',formatter:imgCVC">图片</th>
          </tr>
        </thead>
</table>

js中代码：

function imgCVC(value, row, index) {
    if(value!=null&&value.length>0){
        var img = "http://自己的地址"+value;
        return "<img src='"+img+"' style='width:300px; height: 200px;'>";
    }else{
        return "<span> </span>";
    }
}

二、easyui-datagrid中单元格显示图片，并点击预览显示大图
jsp中代码：

<table id="dg" title="" class="easyui-datagrid" fit="true" url="FdPeople_query.do" 
  toolbar="#toolbar" pagination="true"  rownumbers="true" fitColumns="true" 
    singleSelect="true" striped="true" nowrap="false">
      <thead>
         <tr>
            <th align="center" data-options="field:'fdCreditInformation',formatter:imgCVC">图片</th>
         </tr>
      </thead>
</table>
<!-- 图片预览功能 -->
<div style="display: none"> 
    <div id="dlg" class="datagrid-toolbar" style="padding:5px;"> 
       <img id="simg" src="" alt=""> 
    </div>
</div>

js中代码：

function imgCVC(value, row, index) {
    if(value!=null&&value.length>0){
        var strs = new Array(); //定义一数组
        value = value.substr(1, value.length - 1);
        strs = value.split(","); //字符分割
        var rvalue = "";
        for (var i = 0; i < strs.length; i++) {
            rvalue += "<img onclick='download(\"" + strs[i] + "\")' style='width:50px; height: 50px;' src='" + strs[i] + "' title='点击查看图片'/>";
        }
        return rvalue;
    }
}

function download(img){
    var simg =  "http://自己的地址"+ img;
    $('#dlg').dialog({
        title: '预览',
        width: 600,
        height:500,
        resizable:true,
        closed: false,
        cache: false,
        modal: true
    });
    $("#simg").attr("src",simg);
}

三、easyui-dialog中显示图片

jsp中代码：

<div id="dlg_detail" class="easyui-dialog" style="width:1200px;height:420px;" closed="true" buttons="#dlg_detail-buttons">
    <form id="fm_detail" method="post" style="padding-left: 20px" novalidate>
        <div class="fitem" align="left" style="padding-bottom: 10px">图片：</div>
        <div class="fitem" align="left" style="padding-bottom: 10px;padding-left: 10px">
            <img id="Photo1" src="" style="width:220px;height:200px;">
            <img id="Photo1" src="" style="width:220px;height:200px;">
            <img id="Photo3" src="" style="width:220px;height:200px;">
            <img id="Photo4" src="" style="width:220px;height:200px;">
            <img id="Photo5" src="" style="width:220px;height:200px;">
        </div>
    </form>
</div>

js中代码：

function show_detail(value){
    $.post('FdPeople_show_detail.do', {
        'id' : value
    }, function(result) {
        var strJSON = result;
        var obj = new Function("return" + strJSON)();
        
        $('#dlg_detail').dialog('open').dialog('setTitle', '信息详情');
        //图片信息
        var path = "http://自己的地址";
        $("#Photo1").attr("src",path+obj.Photo1);
        $("#Photo2").attr("src",path+obj.Photo2);
        $("#Photo3").attr("src",path+obj.Photo3);
        $("#Photo4").attr("src",path+obj.Photo4);
        $("#Photo5").attr("src",path+obj.Photo5);
    });
}