来自外部网站的图像不显示在页面上

时间:2017-05-10 19:50:31

标签: javascript jquery html image

我正在使用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"/>

1 个答案:

答案 0 :(得分:2)

您正在使用的img网址:

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

代替。