点击小图替换大图背景图功能异常，求排查代码问题

你代码里的核心问题确实是CSS属性的声明错误：'url(src)' 中的 src 被当成了字符串字面量，浏览器会尝试加载名为 src 的图片资源，而非你获取到的小图URL变量。

修正后的代码 #

JavaScript 部分

// 确保DOM加载完成后再绑定事件
$(document).ready(function() {
    $('.gallery__source').on('click', function(){
        console.log('clicked');
        var src = $(this).find('img').attr('src');  
        // 使用模板字符串或字符串拼接注入变量
        $('.itempage_wrapper_plain').css('background-image', `url('${src}')`);
    });
});

也可以用传统字符串拼接方式替代模板字符串：

$('.itempage_wrapper_plain').css('background-image', 'url("' + src + '")');

额外优化建议 #

• 给大图容器添加背景图适配样式，提升显示效果：

.itempage_wrapper_plain {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

• 如果需要支持多个小图，给每个小图的父容器都添加 gallery__source 类即可。

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