layui實現圖片展示

首先

 

注意：這里需要注意的是，加入了templet，這里就是加入表單元素等模板。詳情參考：

https://www.layui.com/doc/modules/table.html#templet

其中這個d代表的就是服務器返回的數據，ban_img是數據對應的字段名

這還不夠，接下來的才是關鍵，因為此時此刻你的表格是這個樣子的

 

 

 

這個圖片壓根顯示不全，可以這樣來解決

 

 

<style>
    .layui-table-cell{
        text-align: center;
        height: auto;
        white-space: normal;
    }
</style>

 

 

 

最終結果

 

 

 如果覺得太別扭，可以自己改樣式 例如：

    .layui-table img{
        max-width: 300px;
    }

 

 

 這樣就可以了！

 

下面補充一個知識

Layui數據表格條件判斷 更換數字狀態