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

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%;
}
douju1968
douju1968 console.log(数据)给你什么?您需要了解您的内容才能正确使用它
大约 2 年之前 回复
douzi4766
douzi4766 不工作!!!
大约 2 年之前 回复
doudun3040
doudun3040 toolong
大约 2 年之前 回复

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+")");
duandgfh0506
duandgfh0506 好的,我会标记为已解决!
大约 2 年之前 回复
dongre6404
dongre6404 这是一个新问题。
大约 2 年之前 回复
doumuyu0837
doumuyu0837 错误:未捕获的ReferenceError:未在HTMLInputElement.onclick中定义reply_click
大约 2 年之前 回复
dsh84723
dsh84723 见上面的编辑。
大约 2 年之前 回复
dsqnonh2763
dsqnonh2763 让我们在聊天中继续讨论。
大约 2 年之前 回复
drs3925
drs3925 但它的HTML在哪里..例如 <img src ='....
大约 2 年之前 回复
dongle7637
dongle7637 imgur.com/ShvSQzH,我的形象老了。 imgur.com/uijxbp8我的形象新
大约 2 年之前 回复
dongre1907
dongre1907 我没有看到您尝试更新的图像。 它在哪里? 此外,数据返回的URL是相对的,因此您需要检查它对您调用它的页面是否有效。 如果使用Laravel刀片,您可以使用$('#image1')。attr('src','{{url('/')}}'+ data);
大约 2 年之前 回复
dongshou9343
dongshou9343 imgur.com/geD2yFn plz,请参阅我的更新
大约 2 年之前 回复
douyuanliao8815
douyuanliao8815 你可以粘贴数据的console.log结果和你想要更新的图像标签吗?
大约 2 年之前 回复
dougou5844
dougou5844 这不适合我!
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问