If in jquery do:
txt = '<img loading="lazy" src="photo.jpg">';
$('#my_div').append(txt);
works fine, print my image but y if use responsive picture source like
txt = '<picture>';
txt += '<source media="(max-width: 500px)" srcset="https://via.placeholder.com/100">';
txt += '<img loading="lazy" src="https://via.placeholder.com/50">';
txt += '</picture>';
$('#my_div').append(txt);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_div"></div>not work with picture. jQuery can't append picture??
Your code works fine. If you are testing it on your desktop or laptop (bigger screen) it wont show. It will show in smaller screens like mobile which are less than 500px.
In the below example, my_div shows image, but not my_div_2, because of screen size
txt = '<picture>';
txt += '<source media="(max-width: 500px)" srcset="photo_small.jpg">';
txt += '<img loading="lazy" src="https://www.w3schools.com/tags/img_pink_flowers.jpg">';
txt += '</picture>';
$('#my_div').append(txt);
txt = '<picture>';
txt += '<source media="(min-width: 500px)" srcset="photo_small.jpg">';
txt += '<img loading="lazy" src="https://www.w3schools.com/tags/img_pink_flowers.jpg">';
txt += '</picture>';
$('#my_div_2').append(txt);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_div"></div>
<div id="my_div_2"></div>