将从数据库取到图片的url 在前台循环遍历显示图片

数据怎么取的这里就不说了，从controller开始写

@Controller
@RequestMapping("/Admin")
public class AdminController {
    @Autowired
    AdminServic adminServic;

    @ResponseBody
@RequestMapping("/index1")
    Map<String, Object> selectimg (){
        Map<String, Object> map = new HashMap<>(); //创建一个空的map 用于返回
        List<USERS> list = adminServic.selectAdmin(); // 接受到数据
        //map = list.stream().collect(Collectors.toMap(USERS::getID,USERS::getPwd)); //使用stream()方法将list里面的ID Pwd 以键值对放到map
        map.put("list" ,list);
        System.out.println(map);
        return map;
    }
    }

这是我的数据库截图

html 页面

<div class="footer" id="test1">
    <ul id="test"></ul>
</div>
<script>
    $.ajax({
        url:'/Admin/index1',
        type:'post',
        success:function(json){
           var html=""; //先要声明一下
            var data =json.list; //这里的json就是咱们传过来的 map ，data取到list集合
            for (var i = 0; i <data.length ; i++) {
                var ls = data[i]; //循环 ls 得到每一行数据 我这里得到的就是 ID=1 unam=九塔 pwd=。。 href=。。
                //下面就是拼接语句了 ，仔细看看 注意 "" ''  +  这三个
               html = '<li>'+
                       '<a href="'+ls.href+'">'+
                    '<img style="width: 200px; height: 200px;" class="one" id="img'+i+'"  src="'+ls.pwd+'" />'+ '</a>'+
                    '<p> ' + ls.uname + '</p>'+
                    '</li>';
                    //test 是上面定义的ID名
                $('#test').append(html);
            }


        }
    });

看下效果图