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

Question

how do I use the value of console.log to change an image without reloading a page image in my css dynamically?

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

I put the image I want to update from my 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>

my css file

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

Answer 1

You need a way of identifying which image you want to change, e.g. with an id tag. If there was <img id="image1" src="old.jpg"> then you would add the following line of code.

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

EDIT: You need to be sure that data returns a valid image URI, which you could do either by either a) using jquery-validate to check the syntax is correct or b) checking the file actually exists e.g. by making a test AJAX call to the new image address.

EDIT 2: Now you’ve shown you’re actually trying to change a bg image it should be:

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