Trato de mostrar una imagen con <img src="" alt="music cover"> usando <span></span> para mostrar las portadas musicales de mi radio web.
El enlace es dinámico, es por eso que quiero usar la etiqueta span para obtener el enlace URL de la imagen que se muestra durante la reproducción de música.
He intentado esto, pero no funciona:
<center> <p class="current-playlist"> <span></span> </p> </center>Aquí está mi código:
<!DOCTYPE html> <html> <center><p class="current-playlist"><img src="<span></span"></p></center> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> var nowPlayingTimeout; var nowPlaying; function loadNowPlaying() { $.ajax({ cache: false, dataType: "json", url: 'https://my_radio_website.com/api/nowplaying_static/radio.json', success: function(np) { // Do something with the Now Playing data. nowPlaying = np; $('.current-playlist span').text(np.now_playing.song.art); nowPlayingTimeout = setTimeout(loadNowPlaying, 15000); } }).fail(function() { nowPlayingTimeout = setTimeout(loadNowPlaying, 30000); }); } $(function() { loadNowPlaying(); }); </script> </html>Sin la etiqueta img, solo se muestra el enlace de la imagen, ¿cómo podría proceder?
<img src="<span></span"> no es un HTML válido, no puede poner otro elemento en la etiqueta src , solo debe establecer el enlace de imagen a src en su lugar.
Para hacerlo, puede crear un elemento <img src=""> con un atributo src vacío.
Luego, cuando necesite cargar la imagen, puede colocar el enlace de la imagen en el atributo src .
Ejemplo:
const imageLink = "https://picsum.photos/200/300"; // setTimout to simulate ajax request setTimeout(() => { $(".current-playlist img").attr("src", imageLink); // OR document.querySelector('.current-playlist img').src = imageLink; }, 1000); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="current-playlist"> <img src=""> </p>