如何從API獲取圖像

Question

我在pic變量中得到了圖像名稱，但是現在我空白了如何在前端顯示該圖像。

<script>
$.getJSON(`https://openlibrary.org/authors/<%= match %>.json`, function(data) {


    var text = `<tr><td>${data.name}</td>
                    <td>${data.bio}</td>
                    <td>${data.alternate_names}</td>
                <td>${data.birth_date}</td></tr>`
    var pic = `${data.photos}`
    $(".mypanel").html(text);
    $(".picpanel").html(pic);

});

Answer 1

有幾種方法，您可以簡單地在img標簽中實現它們：

$(".picpanel").append("<img src='" + pic + "'>");

您還可以將其作為背景實現在元素上：

$(".picpanel").css('background-image', 'url(' + pic + ')');

編輯：想要的解決方案：

<script>
$.getJSON(`https://openlibrary.org/authors/<%= match %>.json`, function(data) {


    var text = `<tr><td>${data.name}</td>
                <td>${data.bio}</td>
                <td>${data.alternate_names}</td>
            <td>${data.birth_date}</td></tr>`
    var pic = data.photos;
    $(".mypanel").html(text);
    if(pic!==undefined && pic.length>0){
        $(".picpanel").html("<img src='//covers.openlibrary.org/a/id/" + pic[0] + "-M.jpg'>");
    }
});
</script>

Answer 2

就您當前的情況而言，我想可能是這樣。

$(".picpanel").html("<img src='" + pic + "' />");

Answer 3

這是您的完整解決方案

   <script>
          $.getJSON(`https://openlibrary.org/authors/<%= match %>.json`, function(data) {


    var text = `<tr><td>${data.name}</td>
                    <td>${data.bio}</td>
                    <td>${data.alternate_names}</td>
                <td>${data.birth_date}</td></tr>`
    var pic = `${data.photos[0]}`
    $(".mypanel").html(text);
    var add =pic+'-M.jpg'
    console.log(add);
    $(".picpanel").append("<img src='https://covers.openlibrary.org/a/id/" + add + "'>");
});