Tengo un proyecto donde el usuario puede cargar una imagen y la imagen se almacenará en una base de datos MongoDB. ¿Cómo puedo actualizar la imagen de fondo de un div que tengo en la página cada vez que se carga una nueva imagen sin actualizar la página? Intenté eliminar la imagen de fondo y volver a agregarla, pero no pareció funcionar:
function updateLogo() { console.log("update"); $("#chain-logo").css("background-image", "none"); $("#chain-logo").css("background-image", `url("/api/images/chain/${chainId}")`); }Aquí está el código que envía la imagen al servidor y luego llama a 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 para la página:
<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 para divisiones:
#chain-logo { border-radius: 20px; height: 200px; width: 260px; background-image: url("/public/images/chain-default.svg"); background-size: 260px 200px; }¡Gracias a StackSlave por tener esta idea!
Pude solucionar mi problema cambiando mi código a lo siguiente:
// 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}")`); }); }Cada vez que llamé a la función updateLogo, incrementé el número de solicitud en 1 para que la URL fuera diferente cada vez.