Si en jquery hacer:
txt = '<img loading="lazy" src="photo.jpg">'; $('#my_div').append(txt);funciona bien, imprima mi imagen pero y si usa una fuente de imagen receptiva como
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>no funciona con la imagen. ¿jQuery no puede agregar una imagen?
Tu código funciona bien. Si lo está probando en su computadora de escritorio o portátil (pantalla más grande), no se mostrará. Se mostrará en pantallas más pequeñas, como las de los móviles, que tienen menos de 500 px.
En el siguiente ejemplo, my_div muestra la imagen, pero no my_div_2, debido al tamaño de la pantalla.
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>