Question

我试图通过在我的css中为我正在使用的api提供的链接提供背景图像属性来向div添加背景图像。但是，它不起作用。如果我尝试直接从chrome访问图像，我也什么也得不到。这是我的代码：

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

function appendToDom(poster) {
    var aPoster = $('<div>');
    var movie_poster = 'url("' + 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': movie_poster //'url("./../images/question.jpg")'
    })
    $(main).append(aPoster);
}

我的console.log返回url（“/ rwn876MeqienhOVSSjtUPnwxn0Z.jpg”）这是我期望的网址。如果有帮助，我正在使用The Movie DataBase API。

提前感谢您的所有帮助！

嘿伙计们！我终于弄明白了。这是我的最终js文件，其中包含附加到显示的特定名称的海报列表。

$('#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) {
        for (let i = 0; i < responseData.results.length; i++) {
            var poster = responseData.results[i].poster_path;
            appendToDom(poster);
        }
    }

    function appendToDom(poster) {
        var aPoster = $('<div>');
        var movie_poster = 'url("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',
        })

        if (poster === null) {
            aPoster.css({
                'background-image': 'url("./../images/question.jpg")'
            })
        } else {
            aPoster.css({
                'background-image': movie_poster //'url("https://image.tmdb.org/t/p/w1280/rwn876MeqienhOVSSjtUPnwxn0Z.jpg")' //'url("./../images/question.jpg")'
            })
        }
        $(main).append(aPoster);
    }

Answer 1

   html file .

 <!Doctype html>
    <html>

    <head>
      <Title>Image Background</Title>

    </head>

    <Body>
      <main></main>
      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
      <script>
        $.getJSON("http://127.0.0.1/json", function(result) {
          console.log(result);
          getData(result);
        });

        function getData(responseData) {
          var poster = responseData.poster_path;
          appendToDom(poster);
        }

        function appendToDom(poster) {
          console.log(poster);
          var aPoster = $('<div>');
          var movie_poster = 'url("' + 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': movie_poster //'url("./../images/question.jpg")'
          })
          $("main").append(aPoster);
        }
      </script>
    </Body>

    </html>

简单的后端。

var http = require('http');
var fs = require('fs');

var server = http.createServer(function (req, res) {
  console.log(req.url);

  if (req.url == "/json") {
    var j = {
      poster_path: "./public/images/foxxi.webp"
    }
    console.log('sending json');
    res.end(JSON.stringify(j));
  } else if (req.url == "/public/images/foxxi.webp") {
    fs.readFile("./public/images/foxxi.webp", function (err, image) {
      res.write(image);
      console.log('sending image');
      res.end();
    });

  } else {
    fs.readFile("po.html", function (err, html) {
      res.write(html);
      console.log('sending html');
      res.end();
    });

  }

});

server.listen(80);

无法将从api提供的数据中检索到的背景图像添加到div node.js

1 个答案: