Springboot+layui表格中展示本地图片

最新推荐文章于 2024-08-18 21:58:22 发布

wechatcqy

最新推荐文章于 2024-08-18 21:58:22 发布

阅读量1k

点赞数

文章标签： java

原文链接：https://blog.csdn.net/weixin_43164644/article/details/83313377

版权

在使用html加载图片时，发现使用相对路径能显示图片。但是如果该图片新增，那么springboot则不能加载显示。本地图片不能显示最主要的问题是，图片在本地url和图片在服务器上被加载是的URL是不一样的，也就是路径的问题。
解决的办法其实很简单，只要写一个配置文件，也就是图片位置的转化器，原理是虚拟一个在服务器上的文件夹，与本地图片的位置进行匹配。在调用本地图片时，就相当于调用服务器上的图片。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebAppConfigurer extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        
        String imageSystemUrl = systemService.queryImageUrl();
		registry.addResourceHandler("/image/**").addResourceLocations("file:"+"\\"+imageSystemUrl);
        super.addResourceHandlers(registry);
    }
}

html中如下引用就可以了

 table.render({
            elem: '#demo'
            , url: 'queryImageByClientId?id=' + id
            , toolbar: "#tablebar"
            , defaultToolbar: []
            , cols: [
                [
                    {field:'imagePath',width:'25%',title: '照片',align:'center' ,templet: function (d) {
                            if(d.imagePath === ''||d.imagePath == null){
                                return "<div style=\"width:95px;height:100px;\" ><a href=\"javascript:void(0)\" οnclick=\"Image('{{d.header}}')\" ><div id=\"imagetou1\" style=\"width:100%;height:100%;padding:0px;\" >\n" +
                                    "        <img src=\"/images/default.jpg\" style=\"width: 100%;height: 100%;\">\n" +
                                    "    </div></a></div>";
                            }else{
                                Image(d.id);
                                return "<img src='" + d.imagePath + " 'id='" + d.id+ "'>";
                            }
                        }},
                    {field:'imageName',width:'25%',title: '照片名称',align:'center' },
                    {field:'imageSize',width:'25%',title: '照片大小',align:'center'},
                    {field:'createTime',width:'25%',title: '创建时间',align:'center',templet: function (d) {
                            return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")
                        }
                    }
                ]
            ]
            , id: 'image'
            , page: true
            , limit: 10
            , height: 'full-72'
            , limits: [3, 5, 10, 15]
        });