我尝试用<img src="" alt="music cover">显示图像，用<span></span>显示我的网络收音机的音乐封面。
链接是动态的，这就是为什么我想使用span标签来获取音乐播放期间显示的图像的url链接。
我试过这个，但不起作用：
<center>
<p class="current-playlist">
<span></span>
</p>
</center>
这是我的代码：
<!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>
如果没有img标记，只显示图像链接，我如何继续？
<img src="<span></span">不是有效的HTML，您不能将另一个元素放入src标记中，您应该只将图像链接设置为src。
要做到这一点，您可以用一个空的src属性封装一个<img src="">元素。
然后，当您需要加载图像时，可以将图像链接放入src属性中。
示例：
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>