如何在背景图片更改后刷新背景图片？

Question

如何在背景图片更改后刷新背景图片？

6

我有一个项目，用户可以上传图像，并将图像存储在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>

的CSS样式：

#chain-logo {
    border-radius: 20px;
    height: 200px;
    width: 260px;
    background-image: url("/public/images/chain-default.svg");
    background-size: 260px 200px;
}

- Illusion705

你可能需要为每个上传的图片添加唯一的ID，这样当你尝试使用更新后的图片更改背景时，它就不会被缓存。 - Rickard Elimää

我不知道你的图片是否是动态的，所以请尝试这样做：$("body #chain-logo").css(你代码的其余部分)。 - Rhadamez Gindri Hercilio

Rickard Elimää，每张图片在存储到数据库时都会获得一个唯一的名称，然后服务器会向API提供最新的图片。我只需要找出如何让客户端刷新图像即可。Rhadamez Gindri Hercilio，感谢您的建议！不幸的是它没有起作用。 - Illusion705

1

你可以使用类似于 ImageElement.src = URL.createObjectURL(file); 的解决方案来替换你的 updateLogo()。当然，你需要创建一个条件，使用一个更高级别的变量，以防止在上一个上传完成之前进行另一个上传。或者，如果图像已上传到服务器并且你有一个实际的URL，并且你可能正在使用相同的URL，则在服务器上向GET URL的末尾添加一些内容，例如 'imagename.png?q='.uniqid('', true);。 - StackSlave

StackSlave，非常感谢你的帮助！我在URL中添加了一个叫做requestNum的查询字符串，并且每次请求图片时都会更改它，现在它可以工作了。 - Illusion705

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Illusion705 · Accepted Answer

感谢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都不同。