怎么动态设置添加div中图片的路径

我想在一个容器里点击按钮添加一个div，div里面呢又有图片，但是每次点击添加的图片路径都是一样的，我想每次点击添加的是不一样路径的图片，我又想用数组包含一堆图片的集合，但是不知道该怎么把这个数组放在html代码中当成一个变量表示出来。

        var html = "<div class=\"col-sm-6 col-md-3\">\n"+
             "<div class=\"thumbnail\" style=\"width: 200px;height: 300px;\">"+
             "<img  id = \"imging\" decoding=\"async\" src=\"1.JPG\" alt=\"通用的占位符缩略图\" width=\"150px\" height=\"200px\">"+
             "<div class=\"caption\" style=\"width: 200px;height: 50px;\">"+
             " <h4>缩略图标签</h4>"+
             "</div>\n"
        +"</div>\n";
        $(function(){
            $('.btn').bind('click',function(){
                $('.row').append(html);
            })
        })

img

用模板字符

        var html = `<div class="col-sm-6 col-md-3">
             <div class="thumbnail" style="width: 200px;height: 300px;">
             <img  id = "imging" decoding="async" src="1.JPG" alt="通用的占位符缩略图" width="150px" height="200px">
             <div class="caption" style="width: 200px;height: 50px;">
             <h4>缩略图标签</h4>
             </div>
        </div>`
        $(function(){
            $('.btn').bind('click',function(){
                $('.row').append(html);
            })
        })

字符串拼接 啊 不过模板字符串 更方便 ${变量}就行了

var html = "<div class=\"col-sm-6 col-md-3\">\n"+
             "<div class=\"thumbnail\" style=\"width: 200px;height: 300px;\">"+
             "<img  id = \"imging\" decoding=\"async\" src="+a+" alt=\"通用的占位符缩略图\" width=\"150px\" height=\"200px\">"+
             "<div class=\"caption\" style=\"width: 200px;height: 50px;\">"+
             " <h4>缩略图标签</h4>"+
             "</div>\n"
        +"</div>\n";
        $(function(){
            $('.btn').bind('click',function(){
                $('.row').append(html);
            })
        })