javascript - 将动态背景设置为引导模式

Question

我正在尝试为我的引导模式设置背景，该模式具有以下场景，我有一个动态变化的图像，它将显示为模型的背景图像通过对 getFile/getImage 进行 REST 调用来检索这些图像(REST 调用从文件系统检索图像)。当我在任何 div 标签的 Html 文件中使用类似这样的东西(下面的代码)时，它工作正常

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

这是一个快照，可以更好地可视化我想要实现的目标(这是通过使用工作区静态文件夹中的图像来实现的)

Answer 1

您正在寻找这样的解决方案吗？尝试将图像网址放在双引号中。

function setbackgroundformodalcontent() {
    $('#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")'});
};

function setbackgroundformodal() {
    $('#myModal').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")'});
};

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

<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="setbackgroundformodalcontent()">Set Background For Modal</button>
    <button onclick="setbackgroundformodal()">Set Background For Modal Behind</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">
            &times;
            </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>