Bootstrap模态框打开后图片无法加载，如何正确获取图片src？

问题根源 #

你的代码存在两个关键错误，导致图片无法正确加载：

• 选择器匹配错误：模态框内的预览图片使用id="imagepreview"定义，但jQuery代码中误用了类选择器.imagepreview，无法定位到目标元素。
• 图片路径获取逻辑错误：.pop是<a>标签，它的内部并没有嵌套<img>元素，$(this).find('img')会返回空结果，自然拿不到图片路径。不过你已经给<a>标签添加了data-large-src属性存储大图路径，完全可以直接利用这个属性。

修正方案 #

方法一：利用已有的data-large-src属性（推荐） #

修改jQuery代码，直接读取data-large-src的值，并修正选择器：

$(function() {
    $('.pop').on('click', function(e) {
        e.preventDefault(); // 阻止a标签默认跳转行为
        $('#imagepreview').attr('src', $(this).data('large-src'));
        $('#imagemodal').modal('show');   
    });     
});

方法二：从父容器中匹配目标图片 #

如果不想依赖data-large-src属性，可以通过DOM层级关系找到外层的图片元素：

$(function() {
    $('.pop').on('click', function(e) {
        e.preventDefault();
        // 从当前a标签向上定位到.box-img-hover容器，再获取内部img的src
        var imgSrc = $(this).closest('.box-img-hover').find('img').attr('src');
        $('#imagepreview').attr('src', imgSrc);
        $('#imagemodal').modal('show');   
    });     
});

额外优化：移除冲突属性 #

你的<a>标签里重复定义了data-toggle（data-toggle="tooltip"和data-toggle="modal"），会导致Bootstrap属性冲突，建议移除data-toggle="modal"，因为我们已经通过jQuery手动触发模态框：

<li><a class="pop" href="#" data-toggle="tooltip" data-placement="right" data-large-src="images/img-pro-01.jpg" title="View"><i class="fas fa-eye"></i></a></li>

内容的提问来源于stack exchange，提问作者Murray Johnson