I want to make a website for my family company using SvelteKit. My current aim is to get a random nature image from Unsplash and make it the background image of the whole app. I set up the logic and I can get the image to show in the background but I get this error in the browser console, which repeats itself about every second:
GET http://localhost:3000/__vite_ping net::ERR_CONNECTION_REFUSED
Screenshot of the resulting page and console error
Here is index.svelte so far:
<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>There is also the warning at the top which I don't understand. And also I am guessing the additional background stylings should be added along with the image url and not inside the style tags, since they don't appear to be working.
Any insight would be appreciated. Thanks, Ugur.
What you're seeing there is the hot module reloading/dev server for Vite trying to poll over that websocket (http://localhost:3000/__vite_ping), not actually a problem with fetching from unsplash.
I would confirm:
Look for the terminal where you started the dev server and look for any errors there as well.