gpt4 book ai didi

javascript - 图片更改后如何刷新背景图片

转载 作者:行者123 更新时间:2023-12-04 11:38:56 25 4
gpt4 key购买 nike

我有一个元素,用户可以上传图像,图像将存储在 MongoDB 数据库中。每次上传新图片时,如何在不刷新页面的情况下更新页面上 div 的背景图片?我尝试删除背景图像并重新添加它,但它似乎不起作用:

function updateLogo() {
console.log("update");
$("#chain-logo").css("background-image", "none");
$("#chain-logo").css("background-image", `url("/api/images/chain/${chainId}")`);
}
这是将图像发送到服务器然后调用 updateLogo 的代码:
function uploadLogo() {
let file = document.getElementById("logo-input").files[0];
let formData = new FormData();

formData.append("logo", file);

fetch(`/chain/${chainId}/upload/logo`, {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
updateLogo();
});
}
页面的 HTML:
<body>
<div id="header-container"></div>
<div id="administrator-message-banner">
<p></p>
</div>
<div id="chain-logo-container">
<input type="file" id="logo-input" accept=".png,.svg,.jpeg,.gif,.jpg,.txt" />
<div id="chain-logo"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/public/js/chain.js"></script>
</body>
div的CSS:
#chain-logo {
border-radius: 20px;
height: 200px;
width: 260px;
background-image: url("/public/images/chain-default.svg");
background-size: 260px 200px;
}

最佳答案

感谢 StackSlave 提出这个想法!
我可以通过将代码更改为以下内容来解决我的问题:

// updates logo
let requestNum = 0;
function updateLogo(chain) {
fetch(`/api/chain/${chainId}/data`)
.then(response => response.json())
.then(data => {
$("#chain-logo").css("background-image", `url("/api/images/chain/${chainId}?requestNum=${requestNum}")`);
});
}
每次调用 updateLogo 函数时,我都会将 requestNum 增加 1,这样每次 url 都会不同。

关于javascript - 图片更改后如何刷新背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68946771/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com