尝试替换div img src时，jQuery attr不起作用

Question

我试图在单击时更改缩略图的主图像，但是attr无法正常工作，我不知道为什么。

$(document).ready ( function () {
$('#miniatura img').click(function(){

var camin = $(this).attr('src');

    $('#imagem_main').attr('src',camin);
    
});

});

<figure class="woocommerce-product-gallery__wrapper">
		 <div id="main-image-gallery"> <img width="600" height="600" src="bolo1-1000x1000-600x600.jpg" class="attachment-woocommerce_single size-woocommerce_single" alt="Bolo de Brigadeiro" title="bolo1" data-caption="" data-src="bolo1-1000x1000.jpg" data-large_image="bolo1-1000x1000.jpg" data-large_image_width="1000" data-large_image_height="1000" id="imagem_main" srcset="bolo1-1000x1000-600x600.jpg 600w, sizes="(max-width: 600px) 100vw, 600px" /></div>  
     
     
     <div id ="miniatura">
     
     <img width="100" height="100" src="bolo2.jpg" class="attachment-100x100 size-100x100" alt="" title="bolo2" data-caption="" data-src="bolo2.jpg" data-large_image="bolo2.jpg" data-large_image_width="1000" data-large_image_height="1000" id="" srcset="bolo2-100x100.jpg 100w" sizes="(max-width: 100px) 100vw, 100px" />
     
     <img width="100" height="100" src="bolo3.jpg" class="attachment-100x100 size-100x100" alt="" title="bolo3" data-caption="" data-src="bolo3.jpg" data-large_image="bolo3.jpg" data-large_image_width="1000" data-large_image_height="1000" id="" srcset="bolo3 100w," sizes="(max-width: 100px) 100vw, 100px" /> </div></figure>