html给每一个图片加上链接

问题遇到的现象和发生背景

想给每一个图片上都添加上链接,无奈我不会,求解答

问题相关代码,请勿粘贴截图
<style>
   *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
   opxqqq{ list-style-type: none;}  
    #box{
        position: relative;
        /* 定位:生成相对定位的元素,相对于其正常位置进行定位。 */
        width: 512px;
        height: 768px;
        /* 长款大小 */
        margin: 20px auto;
        /* 外边框20像素依赖于运行的系统 */
    }
    </style>
</head>
<body>
    <div id="box">
        <span id="text"></span>
            <div>
            <img id="img" alt="">
            </div>
        <button id="pret">上一个</button>
        <button id="next">下一个</button>
    </div>
    <audio autoplay="autoplay" "loop="loop" preload="auto"
                src="tank.mp3">
    </audio>
    <!-- <a href="http://www.php.cn"><src="img/bg_1.jpg"> </a> -->
    
    <script>
        //图片地址数组
        let imgArr = ["img/bg_1.jpg" ,
            "img/tcs1.png",
            "img/cjml.png",
            "img/wzq111.png"
        ]
        var xii=["cjdz.html","snack.html","superm.html","fivedot.html"]
        let img = document.getElementById("img"); //img标签
        let pret = document.getElementById("pret"); //上一个按钮dom
        let next = document.getElementById("next"); //下一个按钮dom
        let text = document.getElementById("text"); //文字显示
        let dizhi = document.getElementById("tt"); 
        var i = 0;
        defaultImg(imgArr, img, i, text);
        next.addEventListener("click", () => {
            nextFn(imgArr, img)
        })
        pret.addEventListener("click", () => {
            prextFn(imgArr, img)
        })
        function defaultImg(arr, img, index, text) { //默认的图片  arr-图片数组 。img是图片dom,index-是下标 text-是文字标签dom
            img.src = arr[index];
            text.innerText = `共计${arr.length}个游戏,当前是第${index + 1}个`
        }
        function prextFn(arr) { //上一张
            if (i == 0) {
                i = arr.length - 1;
                img.src = arr[arr.length - 1];//加上这个就是到了第一张,再次点击就回到最后一张,不想要可以注释
                text.innerText = `共计${arr.length}个游戏,当前是第${i + 1}个游戏`
                alert("已经是最后一个游戏了,点击将返回第一个"); //如果不想这样可以把这三行注释掉
                return
            }
            i--;
            img.src = imgArr[i];
            text.innerText = `共计${arr.length}个游戏,当前是第${i}个游戏`
        }
        function nextFn(arr) { //下一张
            if (i == arr.length - 1) {
                i = 0;
                img.src = arr[0]; //加上这个就是到了最后一张,再次点击就回到第一张,不想要可以注释
                text.innerText = `共计${arr.length}个游戏,当前是第${i + 1}个游戏`
                alert("已经是最后一个游戏了,点击将返回第一个"); //如果不想这样可以把这三行注释掉
                return
            }
            i++;
            img.src = arr[i];
            text.innerText = `共计${arr.length}个游戏,当前是第${i + 1}个游戏`
        }
    </script>
</body>
运行结果及报错内容
我的解答思路和尝试过的方法

别人说的a标签包裹住,我只能添加上一个链接

我想要达到的结果

在img外层加个a标签

<a href="#"><img src=""/></a>

图片要被点击的话不如直接img,不用背景图;
如果非要背景图点击的话;
给背景图的div套个a标签,但是背景图的div要给宽高