我正在尝试为具有以下情况的引导程序模式设置背景，我有一个动态变化的图像，它将作为模型的背景图像显示通过对getFile / getImage进行REST调用来检索这些图像。当我在任何div标签的HTML文件中使用类似This（以下代码）的代码时，它都可以正常工作
<img style="width: 100%" src="getFile/getImage/dynamicBikeImage" alt="Dynamic Bike Image">
但是当我使用javascript设置模态背景时，它会失败。
这是我尝试过的代码
$('#bikeModal').css({'background-size':'100%, 100%','background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(getFile/getImage/dynamicBikeImage)'});
我也尝试过让ajax调用这样的东西
$.ajax({
url: "/getFile/getImage/dynamicBikeImage",
type: 'GET',
success: function(res) {
$('#bikeModal').css({'background-size':'100%, 100%','background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(getFile/getImage/dynamicBikeImage)'});
}
});
令人困惑的是，如果我使用静态文件夹中的图像，那么它可以按预期工作，例如
$('#bikeModal').css({'background-size':'100%, 100%','background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(static/images/bikebg.jpg)'});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
function setbackground() {
$('#myModal .modal-content').css({'background-size':'100%, 100%','background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("https://cdn3.iconfinder.com/data/icons/business-258/64/_Team_Work-512.png")'});
};
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button
type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#myModal"
>
Open modal
</button>
<button onclick="setbackground()">Set Background</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>