前端JS模糊搜索功能问题

这样一个数组（curFiles）

改如何模糊筛选里面的图片名字，并在前端页面展示模糊搜索出来的图片
我的代码如下：
$(function(opposedid){
$('#search_btn').click(function() {
var searchText = $.trim($('#search_con').val().toString());
if (searchText !== '') {
for (i = 0;i < curFiles.length;i ++ ){
if(curFiles[i].indexOf(searchText) >= 0 ){
console.log(curFiles[i]);
showImages(curFiles[i],opposedid);
}
}

    } else {
        showImages(curFiles,opposedid);
        return false;
    }
})

});
搜索完后展示的却是这样：
图片说明
我该如何写才是正确的

showImages有问题罗。。而且问题也没有说清楚，你是要直接显示图片出来还是只是显示图片名称？显示图片要用img标签

看了问题，感觉问题描述不清楚，缺少showImages方法的描述，综合需求构建了如下demo，可参考：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片模糊搜索</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #search{
            width:400px;
            height:30px;
            margin: 20px auto;
        }
        #ipt{
            padding:0 10px;
            width:200px;
            height:30px;
        }
        #btn{
            display: inline-block;
            width:80px;
            height:34px;
        }
        #main{
            margin : 50px auto;
            width: 650px;
        }
        #main img{
            display: block;
            margin: 0 10px 10px 0;
            float: left;
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
    <div id='search'>
            <input type="text" id='ipt'>
            <button id='btn'>搜索</button>
    </div>
    <div id='main'>

    </div>
</body>
    <script>
        $(function(){
            $('#btn').on('click',function(){
                // 获取输入框内容
                var str = $('#ipt').val().trim();
                // 定义图片数据源
                var arr = [
                    './img/a.jpg',
                    './img/ab.jpg',
                    './img/abc.jpg',
                    './img/abcd.jpg',
                ]
                // 定义子节点
                var htmlStr = '';
                // 定义开关判断有无搜索结果
                var type = false;
                // 循环匹配图片路径
                arr.forEach(function(item){
                    if(item.indexOf(str) !== -1){
                        // 满足搜索条件后再子节点添加图片
                        htmlStr += `<img src=${item} />`;
                        type = true;
                    }
                })
                // 判断搜索结果开关
                if(type){
                    $('#main').html(htmlStr)
                }else{
                    // 如果搜索结果为空，提示并清空容器
                    alert('无查询结果~')
                    $('#main').html('')
                }
            })
        })
    </script>
</html>

以上仅为自己想象构建，仅供参考