如何通过span标签动态设置img的src以显示网络电台专辑封面？

你的核心问题是错误地把<span>标签嵌套进了<img>的src属性里，HTML不允许这种写法，而且你之前的逻辑是把图片链接放到span的文本中，没有关联到img的src属性。

修正方案： #

1. 调整HTML结构，直接保留<img>标签并给它一个标识（比如类名），不需要用span存链接：

<!DOCTYPE html>
<html>
  <center>
    <p class="current-playlist">
      <img class="music-cover" src="" alt="music cover">
    </p>
  </center>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    // JS部分后续修改
  </script>
</html>

2. 修改JavaScript代码，直接把获取到的图片URL赋值给img的src属性：

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) {
            nowPlaying = np;
            // 直接给img的src属性赋值图片链接
            $('.music-cover').attr('src', np.now_playing.song.art);

            nowPlayingTimeout = setTimeout(loadNowPlaying, 15000);
        }
    }).fail(function() {
        nowPlayingTimeout = setTimeout(loadNowPlaying, 30000);
    });
}

$(function() {
    loadNowPlaying();
});

补充说明： #

• HTML属性里不能嵌套其他标签，所以<img src="<span>">这种写法完全无效。
• 不需要通过span中转链接，直接把接口返回的图片URL设置给img的src属性，就能自动加载并显示图片。
• 如果需要处理图片加载失败的情况，还可以给img加onerror事件兜底：

<img class="music-cover" src="" alt="music cover" onerror="this.src='你的默认封面图片链接'">

内容的提问来源于stack exchange，提问作者H.LK