我正在尝试进行一个简单的操作，即在顶部加载一个大图像，在底部有一排较小的画廊图像，以便单击较小的图像将其放入较大的顶部容器中。

我在我的网站中使用 PHP 加载的 url，所以我在这里用占位符图像替换了它们，但问题仍然存在，我很确定这与我如何在我的 javascript 中声明 css 工作有关，因为点击小图像肯定会执行操作，但源似乎没有加载。

我到底在这里搞砸了什么？

    $('.gallery__source').on('click', function(){
        console.log('clicked');
        var src = $(this).children('img').attr('src');  
        $('.itempage_wrapper_plain').css('background-image','url(src)');
    });
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div class="itempage_wrapper_plain" style="background-image:url('https://loremflickr.com/320/240/dog'); border-radius: 25px 0px 0px 0px; height:300px; width:300px;">
</div>

<div class="gallery__source">
    <img style="padding:10px;" src="https://loremflickr.com/320/240">
</div>