使用layui的table显示图片

清疚 2023-07-15 15:15 41阅读 0赞

# 一. 问题背景 #

项目：一个商城  
效果：如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

# 二. 解决方案 #

# ！！前提！！：如果table所在的是一个html页面，那么你的路径值需要加上项目名，如果是jsp页面，则不需加上项目名。 #

我的table是在一个html页面，所以路径值需要加上项目名，我的项目名是UsedProduct，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]

看了网上很多方法，但是99%是成功显示出来，但是按F12会看到有一个404报错。所以我们必须采用layui的tpl模板解决图片问题，才能完美显示并且不报错

*  定义一个tpl模板，用来支持图片 (第三行代码imgPath换成你自己要显示图片的field值），如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][202003171500395.PNG]

*  然后在显示图片的那个列写出选择上面定义的tpl模板，如下：

{ field: 'imgPath', title: '商品封面', templet:'#imgTpl'},

*  以上步骤只能显示图片的部分，还不能正常显示图片的全部，下面自定义css来把图片显示全了，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 3]

*  如果头部复选框变成如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 4]  
    把复选框中的fixed属性删掉即可，代码如下:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230528/32c700d0e1aa4b59a4eb93ebcdf66bf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: /images/20230528/04702299e5a246708a464493d05f27d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]: /images/20230528/20b5046da20e4d64bcfb2df53a31124b.png
[202003171500395.PNG]: /images/20230528/ad34d87fa1a44d70b3985f9d0de9623f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 3]: /images/20230528/9314a71cdc784fd3be805bc45ac10c95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 4]: /images/20230528/97c87c1a698644a4b3862fc6df78ec96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 5]: /images/20230528/ee9653eb1a0d4dbdb7c2e04093fc1ba7.png