Question

我正在尝试在div上放置背景图片，以取消来自get请求的图片。我正在使用jQuery，但无法正常工作...

这是我的代码：

index.js

<script>
  fetch('url').then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
    console.log(data['img-detail']); // this is the img
    $('.fw .fp-ui').css("background-image", "url(data['img-detail']) !important");
  }).catch(function() {
    console.log("Error");
  });
</script>


<style>
      .fw .fp-ui{
        background-position: center;
        background-size: cover;
      } 
</style>

Answer 1

您正在将字符串传递给url参数，但这不是您期望的，因为您将data['img-detail']作为字符串而不是其值传递，我会尝试：

<script>
    fetch('url').then(function(response) {
        return response.json();
    }).then(function(data) {
        console.log(data);
        console.log(data['img-detail']); // this is the img
        $('.fw .fp-ui').css("background-image", "url(" + data['img-detail'] + ")");
    }).catch(function() {
        console.log("Error");
    });

<style>
  .fw .fp-ui{
    background-position: center;
    background-size: cover;
  } 
</style>

编辑

正如泰勒·罗珀（Tyler Roper）指出的那样，您必须摆脱“！important”，因为JQuery不支持它，我相信它是不需要的

Answer 2

如果response是JSON对象，则应将img-detail重命名为img_detail，然后像这样使用它：

$('.fw .fp-ui').css("background-image", "url('"+data.img_detail+"')");

使用key.some_value是使用JavaScript access JSON data的一种基本方法。

从获取响应动态更改背景图像

2 个答案: