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

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

转载作者：行者123 更新时间：2023-11-28 03:27:42

27

4

我正在尝试通过在我的 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")，这是我期望的 url。如果有帮助，我正在使用 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);
    }

最佳答案

   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);

关于javascript - 无法将从 api 提供的数据中检索到的背景图像添加到 div node.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44895311/

27

4

0

文章推荐： javascript - 在 mongodb 中保存和执行 IP 排序的最佳方法？

文章推荐： JavaScript 二维碰撞异常

文章推荐： c++ - wxFormBuilder 工具栏间距

文章推荐： javascript - 开 Jest – 导出问题 { 默认为

ios - 从 url 检索 jpg 图像返回 nil。但是，从 url 检索 png 图像工作正常
如果我使用下面的代码，数据将为零 dispatch_async(dispatch_get_global_queue(0,0), ^{ UIImage *img = [[UIImage allo
检索 fread 使用的列分隔符
fread来自 data.table包一般可以在读取文件时自动确定列分隔符( sep )。例如，这里fread自动检测 |作为列分隔符: library(data.table) fread(past
检索 R 中特定单元格的行名和列名
因此，如果我有一个如下所示的数据框: A B C rowname1 4.5 4 3.2 rowname2 3 23
elasticsearch - 使用Solr或Elasticsearch通过大型OR查询子句进行搜索/检索
我有一个汽车模型的搜索数据库:“日产Gtr”，“Huynday Elantra”，“Honda Accord”等。现在我还有一个用户列表和他们喜欢的汽车类型 user1喜欢:carId:1234，c
java - 检索 "To"中的邮件ID并与javamail中的用户输入进行比较
我正在使用 Javamail 来获取一些电子邮件数据。我将用户输入作为电子邮件 ID、imap 地址和密码并连接到 imap。然后我监视收件箱的电子邮件并查明此人是否在“收件人”或“抄送”中。 Ema
检索 R 中的最佳簇数
我有一些数据，我想根据差距统计来评估最佳簇数。我阅读了 gap statistic 上的页面在 r 中给出了以下示例: gs.pam.RU Number of clusters (method '
JAVA - 检索/存储用户名和密码到服务器的安全方法？
我有一个用户名和密码组合，我将使用它通过 java 代码访问安全服务器。我的想法是: 在外部存储加密凭据执行时提示用户输入解密密码在使用前将解密的凭据直接存储在字符数组中使用凭据连接到数据库
java - Firebase 检索
这是 Firebase 数据:[Firebase 数据][1] 我必须从员工那里检索所有字段并将其存储在一个数组中。现在数据更改 toast 消息即将到来，但已经很晚了。 Firebase.setA
iOS 检索 valueForKey？
我是 iOS 的新手，正在开发一个基本的应用程序，它目前正在使用 SSKeychain 和 AFNetworking 与 API 进行交互。当您使用我检索的应用程序登录并在我的 CredentialS
python - 检索/打印执行上下文
编辑:这个问题已经在 apphacker 和 ConcernedOfTunbridgeWells 的帮助下得到解决。我已更新代码以反射(reflect)我将使用的解决方案。我目前正在编写一个群体智能
c - 检索/比较文件中的字符串与用户文本
我是 C 的新手，我想编写一个程序来检查用户输入的单词是否合法。我已经在 stackoverflow 上搜索了建议，但很多都是针对特定情况的。请在我被激怒之前，我知道这个语法不正确，但正在寻找一些关于
c# - 检索/设置密码和其他敏感数据的安全程序
我相信你们中的一些人编写过 C# 类，这些类必须从数据库设置密码/从数据库获取密码。我假设敏感细节不会以明文形式显示。处理此类数据的推荐程序是什么？检索到的文本是否加密？您是否将 pws 存储在加密
Python 检索 RUID？
我在 linux 上使用 2.7 之前的 python 版本，想知道如何检索 RUID？ 2.7 及更高版本从 os 包中获得了 getresuid，但我似乎找不到 2.6 的等效项最佳答案您可以
Android LRUCache 检索
我已经在 Android 中实现了一个存储对象的标准 LRUCache。每个键都是与存储的对象关联的唯一 ObjectId。我的问题是从缓存中检索对象的唯一方法是通过 ObjectId(无迭代器)。实
c# - 检索 *** 的包元数据时出错
这已经被问过很多次了。解决方案(对我有用)是从 packages.config 文件(这就足够了)和 packages 文件夹中删除 *** 包。这对我来说是一个糟糕的解决方案，因为每次我想安装一些
python - 检索 #{ } 中的文本
我有以下文字: #{king} for a ##{day}, ##{fool} for a #{lifetime} 以及以下(损坏的)正则表达式: [^#]#{[a-z]+} 我想匹配所有#{word
.net - 检索/存储数百万个小型二进制对象的最快方法
我正在寻找一种快速(如高性能，而不是快速修复)解决方案来持久化和检索数千万个小型(大约 1k)二进制对象。每个对象都应该有一个用于检索的唯一 ID(最好是 GUID 或 SHA)。额外的要求是它应该可
chisel - 检索 RegInit 的重置值
有没有办法获取 RegInit 的重置值？通过探测产生的类型的成员？我可以看到 RegInit 将返回类型(例如 UInt )。例如，我将有一个寄存器，我想通过 regmap 对其进行控制。 val
Laravel:检索 JSON 数组中的值计数
Iv 目前接手了一个项目，其中开发人员在某些表的 json 数组列中存储了 has many 关系。产品表 ---------------------------- id | product | c
git - 检索 Git 推送历史？
Git 会在任何地方记录推送到远程的历史吗？我注意到我们能够在 Microsoft VSTS 中查看 Git 存储库的推送历史记录以及每次推送的相关提交。它甚至显示旧的、过时的提交，由于后来的强制推

首页

博学

6Ren·AI

商城

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