Javascript 如何使用引导弹出框显示图像的放大版本？

我目前有一个程序，它接受用户输入并将其显示到动态创建的表中。其中一个输入是通过文件类型的输入传递的图像。我想能够扩大这个图像使用一个流行音乐播放器，而悬停在它（鼠标悬停）在表本身

Bellow是我迄今为止使用的jQuery代码，我不确定它为什么不能工作。我相信这与popover函数中传递的“this”有关

//function that adds input values to the table
function addToTable() {
  //add tbody tag if one is not present
  if($("#inputTable tBody").length == 0) {
    $("#inputTable").append("<tbody></tbody>");
  }

  $(function() {
    $('#insertImage').on('change', function()
    {
      var filePath = $(this).val();
      console.log(filePath);
    });
  });

var imageLocation = $("#insertImage").val().replace(/C:\\fakepath\\/i, "images/");

  //append inputs to the Table
  $("#inputTable tbody").append(
    "<tr>" +
      "<td>" + "<img src=" + imageLocation + " class='image'" + "data-toggle='popover'" + "data-img=" + imageLocation + " title='popover header' id='imageEnlarge'>" + "</td>" +
      "<td>" + $("#addName").val() + "</td>" +
      "<td>" + $("#addSurname").val() + "</td>" +
      "<td>" +
        "<button type='button' " +
          "class='btn'><i class='fas fa-user-edit' id='pencilIcon'></i></button>" +
      "<td>" +
        "<button type='button' " +
          "onclick='openModal(); deleteData(this);'" +
          "class='btn'><i class='fas fa-dumpster' id='dumpsterIcon'></i></button>" +
        "</button>" +
      "</td>" +
    "</tr>"
  );
}

$('#imageEnlarge').on("mouseover", function() {
  $('[data-toggle="popover"]').popover({
         //trigger: 'focus',
     trigger: 'hover',
         html: true,
         content: function () {
       return '<img class="img-fluid" src="'+$(this).data('img') + '" />';
         },
         title: 'Enlarged Image'
   })
})

//向表中添加输入值的函数
函数addToTable（）{
//如果没有车身标签，则添加车身标签
如果（$（“#可输入的tBody”）。长度==0）{
$（“#可输入”）。追加（“”）；
}
$（函数（）{
$（'#insertImage'）。在（'change'，function（）上
{
var filePath=$（this.val（）；
log（文件路径）；
});
});
var imageLocation=$（“#insertImage”）.val（）.replace（/C:\\fakepath\\/i，“images/”）；
//将输入追加到表中
$（“#可输入的tbody”）.append(
"" +
"" + "" + "" +
“”+$（“#addName”）.val（）+“”+
“+$”（“#添加姓氏”）.val（）+”+
"" +
"" +
"" +
"" +
"" +
"" +
""
);
}
$（'#image放大'）。在（“鼠标悬停”，函数（）上）{
$（'[data toggle=“popover”]'）。popover({
//触发器：“焦点”，
触发器：“悬停”，
是的，
内容：功能（）{
返回“”；
},
标题：“放大图像”
})
})

重点是以下几行代码：

var imageLocation = $("#insertImage").val().replace(/C:\\fakepath\\/i, "images/");

"<td>" + "<img src=" + imageLocation + " class='image'" + "data-toggle='popover'" + "data-img=" + imageLocation + " title='popover header' id='imageEnlarge'>" + "</td>"

$('#imageEnlarge').on("mouseover", function() {
  $('[data-toggle="popover"]').popover({
         //trigger: 'focus',
     trigger: 'hover',
         html: true,
         content: function () {
       return '<img class="img-fluid" src="'+$(this).data('img') + '" />';
         },
         title: 'Enlarged Image'
   })
})

var-imageLocation=$（“#insertImage”）.val（）.replace（/C:\\fakepath\\/i，“images/”）；
"" + "" + ""
$（'#image放大'）。在（“鼠标悬停”，函数（）上）{
$（'[data toggle=“popover”]'）。popover({
//触发器：“焦点”，
触发器：“悬停”，
是的，
内容：功能（）{
返回“”；
},
标题：“放大图像”
})
})

任何帮助都将不胜感激