如何在不动态重新加载我的 CSS 中的页面的情况下更改图像？

Question

如何使用 console.log 的值来更改图像而不在我的 css 中动态重新加载页面图像？

      function reply_click(clicked_id){
    $(function() {
        $.ajaxSetup({
           headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
        });
        console.log('attached');
        $('#openButton').on('click', function(data) {
            console.log('clicked');
            $.ajax({
              type: "POST",
              url: "/MYUrl",
                data: { _token: $('meta[name="csrf-token"]').attr('content') }
            })
           .done(function(data){
                console.log(data);
            })
            .fail(function(data){
                console.log('Error:', data);
            });
        });
    });
}

我把我要更新的图片 来自我的blade.php

    <div class="inputbutton">
    <span class="text">TEXT</span>
    <input type="submit" class="btTxt submit" value=""  id="TEXT" onclick="reply_click(this.id)">
    </div>

我的css文件

div.inputbutton input {
background: url('/img/myimg.png') no-repeat;
cursor: pointer;
width: 100px;
height: 130px;
border: none;
background-size: 100%;
}

Answer 1

您需要一种方法来确定要更改的图像，例如带有 id 标签。如果有<img id="image1" src="old.jpg">，那么您将添加以下代码行。

  .done(function(data){
            console.log(data);
            $('#image1').attr('src',data);
    })

编辑：您需要确保 data 返回一个有效的图像 URI，您可以通过以下两种方式来做到这一点：a）使用 jquery-validate 来检查语法是否正确或 b）检查该文件实际上存在，例如通过将test AJAX call 发送到新的图片地址。

编辑 2：现在您已经表明您实际上是在尝试更改应该是的背景图像：

$('.inputbutton input').css("background-image", "url("+data+")");