Question

所以我有问题。我有一个通过Unsplash API获取图像的图像库项目。我将它们显示为通过javascript生成的引导卡。我想在卡页脚上设置一个下载按钮，以便在单击该图像时在新选项卡中打开该图像。

//this is how I get the images from the API

function pedir_imagens(pageNumber) {
    $.ajax({
        url: 'https://api.unsplash.com/photos?&page=' + pageNumber + '&per_page=24&order_by=latest&client_id=dd4e1cb73ca3a1036d4e98d26f72a439141dc17039e1ae79b7bc2a23f3488578',
        type: "get",
        async: true,
        success: function (data, status, response) {
            for (let i = 0; i < data.length; i++) {
                adicionarImagem(data[i]);
            }
         }
    })
}

//this is how I add the images to the page

function adicionarImagem(imagem) {
    var card_image_div = $("<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12 card-margin'></div>");
    var card_div = $("<div class='card p-0'></div>");
    var img_cartaz = imagem["urls"]["raw"] + "&fit=crop&w=500&h=500";
    var img = $("<img class='card-img-top'>");
    img.attr('src', img_cartaz);
    var card_title = $("<div class='card-body'></div>");
    var card_title_text = $("<h4 class='card-title text-left'></h4>");
    card_title_text.text(imagem["user"]["name"]);
    card_title.append(card_title_text);


    var card_text = $("<h5 class='card-title text-left'></h5>");
    card_text.text(imagem["description"]);
    card_title.append(card_text);

    var dl_icon = $("<button id=imgID class='btn btn-default' onclick='window.open(imagem['urls']['raw']);'><i class='fas fa-download' align='right'></i></button > ")
    var card_footer = $("<div class='card-footer'></div>");
    card_footer.append(dl_icon);

    card_div.append(img);
    card_div.append(card_title);
    card_div.append(card_footer);
    card_image_div.append(card_div);

    $('#images_container').append(card_image_div);
}

Answer 1

非常简单，甚至不用JS也可以做到。

只需使用a标记并将目标设置为“新”，并将URL设置为图像的URL。

E.G。

<a href="IMG_URL" target="new" class="btn btn-primary">Download</a>

在上面的JS中，您只需将标签弹出到适当的位置，然后瞧瞧。

Answer 2

你快到了

var dl_icon = $("<button id=imgID class='btn btn-default'><i class='fas fa-download' align='right'></i></button > ")

dl_icon.click(function(){
    window.open(imagem['urls']['raw']);
});

首先，如果您使用JS生成html，则使用内联事件onclick=没有意义
什么都没有传递给onclick的参数，您生成的html是

onclick ='window.open（imagem ['urls'] ['raw']）;'

代替

onclick ='window.open（“ http://proper.url/link-to-image.jpg”）;'

这会起作用

var dl_icon = $("<button id=imgID class='btn btn-default' onclick='window.open(\"" + imagem['urls']['raw']) + "\"'><i class='fas fa-download' align='right'></i></button > ")

但是正如我所说的，您动态创建DOM元素，没有必要使用onclick="..."属性

在新标签中通过API打开图片

2 个答案: