javascript - 如何在文档准备就绪时使用ajax加载图像

Question

$(document).ready(function() {
initfun();
console.log("initalized !");
});

function initfun() {
var basepath = document.location.href + "/wp-content/themes/breviter/assets/tmbdapicalls.py";
$.ajax({
    type: "get",
    url: "http://127.0.0.1:5000/guestSuggestion",
    datatype: "json",
    success: function(response) {
        var output = response;
        //console.log(JSON.stringify(output));
        var json = JSON.parse(output);
        var backpostimage = "https://image.tmdb.org/t/p/w600" + json["results"][0]["backdrop_path"];
        console.log(backpostimage);
        document.getElementById("page-canvas").style = 'background-image: ' + backpostimage + ';background-repeat: no-repeat; background-size:100% 100%;'

    }
})
}

我正在使用上面的代码设置元素的 css 背景，但由于某些原因我无法设置背景图像参数，其他参数设置成功，如下所示

<div id="page-canvas" class="page-wrapper" style="background-repeat: no-repeat; background-size: 100% 100%;">

Answer 1

您没有将图像路径传递给 background-image 中的 url() 函数

document.getElementById("page-canvas").style = 'background-image: ' + backpostimage + ';background-repeat: no-repeat; background-size:100% 100%;'

正确的是

document.getElementById("page-canvas").style = 'background-image: url(' + backpostimage + ');background-repeat: no-repeat; background-size:100% 100%;'