时间戳

首页 > 解决方案 > 如何添加指向 API 结果的链接

javascript - 如何添加指向 API 结果的链接

问题描述

我创建了一个画廊，它从 API (picsum.photos) 中随机提取图片在这里查看：https ://codepen.io/lucas-knm/pen/oVmmEV

问题是这两个链接不可点击。我需要用文本或图标更改它们，并将它们链接到新页面中的实际地址。

我尝试了这段显然行不通的代码：

这是完整的 Js 代码：

window.onload = init;
function init(){

        var xhr = new XMLHttpRequest();

        xhr.open("GET", "https://picsum.photos/list", true);

        xhr.send(null);

        xhr.onload = function(){

                if (xhr.status == 200) {
                    var picsum = JSON.parse(xhr.responseText)
                    console.log(picsum);

                var imageString = "";
                    for(var x = 500; x <510; x++){
                    imageString +=  "<div class = imgContainer>" + "<p class = author>" + 
                    picsum[x].author
                    + 
                    "</p>"
                    + 
                    "<img src= 'https://picsum.photos/200/300?image='>"
                    + 
                    "<p class = authorUrl>" 
                    + 
                    picsum[x].author_url
                    + 
                    "</p><p class = postUrl>"
                    + 
                    picsum[x].post_url
                    + 
                    "</p>"  
                    +
                    "</div>"    
                                    }
                document.getElementById("gallery").innerHTML = imageString;
                gallery.setAttribute('style', 'font-size: 12px; text-align: left; display:absolute;');

        }

    }
}

标签： javascriptjson

解决方案

而不是以文本格式编写 URL，您必须<a>创建标记并将 URL 设置为href它们的属性：

window.onload = init;
function init(){

    var xhr = new XMLHttpRequest();

    xhr.open("GET", "https://picsum.photos/list", true);

    xhr.send(null);

    xhr.onload = function(){

            if (xhr.status == 200) {
                var picsum = JSON.parse(xhr.responseText)
                console.log(picsum);

            var imageString = "";
                for(var x = 500; x <510; x++){
                imageString +=  "<div class = imgContainer>" + "<p class = author>" + 
                picsum[x].author
                + 
                "</p>"
                + 
                "<img src= 'https://picsum.photos/200/300?image='>"
                + 
                "<p class = authorUrl>" 
                + 
                //This is what you need:
                "<a href='" + picsum[x].author_url + "'>"+ picsum[x].author_url +"</a>";
                + 
                "</p><p class = postUrl>"
                + 
                "<a href='" +  picsum[x].post_url + "'>"+  picsum[x].post_url +"</a>"

                + 
                "</p>"  
                +
                "</div>"    
                                }
            document.getElementById("gallery").innerHTML = imageString;
            gallery.setAttribute('style', 'font-size: 12px; text-align: left; display:absolute;');

    }

}
}

推荐阅读