从 Google API 将背景图像附加到 jumbotron 类

Question

在用户在表单中提交他们的位置后，我正在尝试将背景图像附加到我的 jumbotron。 URL 工作正常，但附加的图像永远不会在 jumbotron 中作为背景结束。如有任何帮助，我将不胜感激。

我的 HTML：

<div class="jumbotron">
    <div class="container-fluid text-center ">
    <h3 class="greeting">Where would you like to move?</h1>
    <form id="form-container" class="form-container">
        <label for="street">Street: </label><input type="text" id="street" value="">
        <label for="city">City: </label><input type="text" id="city" value="">
        <p><button class ="btn btn-success btn-md "id="submit-btn">Submit</button></p>
    </form>
</div>

我的 CSS：

.jumbotron {
    height: 400px;
}
.bgimg {
    width: 100%;
    opacity: 0.9;
}

我的 JavaScript 代码：

var street = $("#street").val();

var city = $("#city").val();

var fullLocation = street +", " + city;

var googleUrl = '"https://maps.googleapis.com/maps/api/streetview?size=1000x400&location=' + fullLocation + '"';

$(".jumbotron").append("<img class='bgimg' src=" +googleUrl+ ">");

Answer 1

1. 你用</h1>关闭<h3>这不好：

修改了这个：

<h3 class="greeting">Where would you like to move?</h1>

到：

<h3 class="greeting">Where would you like to move?</h3>

1. 验证您是否添加了jQuery 库。

2. 您不是在附加背景图像，实际上是在附加<img ...。使用preventDefault() 添加on click 事件处理程序，它应该可以工作。

如果您想添加背景图片，您的代码应如下所示：

$(".jumbotron").css('background-image', 'url(' + googleUrl+ ')');

查看工作的 sn-p：

$('.btn').on('click', function(e) {
  e.preventDefault();
  var street = $("#street").val();

  var city = $("#city").val();

  var fullLocation = street +", " + city;

  var googleUrl = '"https://maps.googleapis.com/maps/api/streetview?size=1000x400&location=' + fullLocation + '"';

  $(".jumbotron").append("<img class='bgimg' src=" + googleUrl + ">");
});

.jumbotron {
  height: 400px;
}
.bgimg {
  width: 100%;
  opacity: 0.9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">
  <div class="container-fluid text-center ">
    <h3 class="greeting">Where would you like to move?</h3>
    <form id="form-container" class="form-container">
      <label for="street">Street:</label>
      <input type="text" id="street" value="Wall Street">
      <label for="city">City:</label>
      <input type="text" id="city" value="New York, NY, United States">
      <p>
        <button class="btn btn-success btn-md " id="submit-btn">Submit</button>
      </p>
    </form>
  </div>