Quiero hacer un sitio web para mi empresa familiar usando SvelteKit . Mi objetivo actual es obtener una imagen aleatoria de la naturaleza de Unsplash y convertirla en la imagen de fondo de toda la aplicación. Configuré la lógica y puedo hacer que la imagen se muestre en segundo plano, pero aparece este error en la consola del navegador, que se repite cada segundo:
OBTENGA http://localhost:3000/__vite_ping net::ERR_CONNECTION_REFUSED
Captura de pantalla de la página resultante y del error de la consola
Aquí está index.svelte hasta ahora:
<script> const accessKey = 'MY_ACCESS_KEY'; const url = 'https://api.unsplash.com/photos/random?query=nature&client_id=' + accessKey; fetch(url) .then((res) => { if (res.ok) return res.json(); else alert(res.status); }) .then((data) => { console.log(data); document.getElementsByTagName('div')[0].style.backgroundImage = 'url(' + data.urls.regular + ')'; }); </script> <title>Küpeli Mühendislik •</title> <div> <h1>Küpeli Mühendislik</h1> <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> </div> <style> @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap'); div { font-family: 'Lato', sans-serif; width: 95%; height: 100vh; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; background-size: cover; background-repeat: no-repeat; background-position: center center; /* background-color: #891f14; */ color: aliceblue; } </style>También hay una advertencia en la parte superior que no entiendo. Y también supongo que los estilos de fondo adicionales deben agregarse junto con la URL de la imagen y no dentro de las etiquetas de estilo, ya que no parecen estar funcionando.
Cualquier idea sería apreciada. Gracias Ugur.
Lo que está viendo allí es el módulo caliente recargando/servidor de desarrollo para Vite tratando de sondear ese websocket (http://localhost:3000/__vite_ping), en realidad no es un problema con la obtención de unsplash.
Yo confirmaría:
Busque la terminal donde inició el servidor de desarrollo y busque cualquier error allí también.