Question

我正在尝试使用电影数据库（tmdbs）提供的api为电影创建搜索引擎。我希望每个电影都有一个div弹出窗口，其标题类似于用户输入数据库的标题。现在我选择电影露西作为我的实验。我想要在api的第一个结果中提供的海报图像，当我搜索露西是我正在创建的div的背景图像时，我似乎无法完成此操作。我的最终目标是使用具有背景图像的div创建一系列结果，这些背景图像由api中的前20个结果提供。这是我的代码：

$('#search').keypress(function(e) {
        if (e.which == 13) {
            var movie = $('#search-input').val();
            $('form#login').submit();
            console.log('onclick fun', movie)
            makeCall(movie);
            return false;
        }
    });

    function makeCall(aMovie) {
        console.log('makecall', aMovie);

        link = url + aMovie;
        console.log(link);
        $.ajax({
            method: "GET",
            url: link,
            success: function(data) {
                console.log("the data -->", data);
                getData(data);
            },
        })
    }

    function getData(responseData) {
        var poster = responseData.results[0].poster_path;
        appendToDom(poster);
    }

    function appendToDom(poster) {
        var aPoster = $('<div>');
        var movie_poster = 'https://image.tmdb.org/t/p/w1280' + poster;
        console.log(movie_poster);
        aPoster.css({
            'float': 'left',
            'margin': 10,
            'margin-left': 37,
            'margin-top': 20,
            'width': 200,
            'height': 300,
            'font-size': 36,
            'color': 'black',
            'background-size': '200px 300px',
            'background-image': 'https://image.tmdb.org/t/p/w1280/rwn876MeqienhOVSSjtUPnwxn0Z.jpg' //'url("./../images/question.jpg")'
        })
        $(main).append(aPoster);
    }

以下是我正在寻找的截图。而不是问号，我希望电影海报出现。

enter image description here

我很遗憾这篇长篇文章。我希望有人可以帮助我:)。

提前多多感谢！

Answer 1

var aPoster = $（''）;

和

var aPoster = $（'div'）;

返回完全不同的值。可能想检查一下。

如何将api提供的图像作为我的div在jQuery和节点中的背景图像？

1 个答案: