javascript - 来自外部网站的图像未显示在页面上

Question

我正在使用 api 来获取图像，然后尝试显示该图像。 api 返回的源可以工作，但是当在我的页面上显示它时，它不会显示。

<img class="avi" src="' + data.data[0].musicbrainz_image_url + '"/>

这是显示它的行，但我不明白为什么它不会显示。有任何想法吗？

编辑:这是完整的代码。我正在使用 JQuery 输出带有来自 API 的数据的 html。

$.ajax({
       type: "GET",
        data: {
            api_key:"69abb9ae8bc1af849baf2a2890e08d08",
            name: artistSearch,
            limit: 1,

        },
        url: "http://api.musicgraph.com/api/v2/artist/search",
        dataType: "JSON",
        contentType: 'json',
        success: function(data) {
            console.log(data);
            console.log(data.data[0].name);
            var myHTML = '';
            for (var i = 0; i < 1; i++) {
                myHTML += '<li class="artistName  list-group-item">';
                myHTML += '<span class="name">' + data.data[0].name + '</span></br>';
                myHTML += '<span class="country">Country of Origin: ' + data.data[0].country_of_origin + '</span></br>';
                myHTML += '<span class="country">Decade: ' + data.data[0].decade + '</span></br>';
                myHTML += '<span class="country">Genre of Music: ' + data.data[0].main_genre + '</span></br>';
                myHTML += '<img class="avi" src="' + data.data[0].musicbrainz_image_url + '"/>';
                myHTML += '</div>';
                myHTML += '</li>';
            }
            $('#artist_output').append(myHTML);

编辑2:

myHTML 变量:

<li class="artistName  list-group-item">
<span class="name">Drake</span></br>
<span class="country">Country of Origin: Canada</span></br>
<span class="country">Decade: 2000s / 2010s</span></br><
span class="country">Genre of Music: Rap/Hip Hop</span></br> 
<img class="avi"src="https://commons.wikimedia.org/wiki/File:Drake_at_Bun-B_Concert_2011.jpg"/>

Answer 1

您正在使用的img url:

https://commons.wikimedia.org/wiki/File:Drake_at_Bun-B_Concert_2011.jpg

不是图像，而是 HTML 页面。您需要弄清楚如何直接获取图像的 url，如下所示:

https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Drake_at_Bun-B_Concert_2011.jpg/489px-Drake_at_Bun-B_Concert_2011.jpg

相反。