Svelte : fetch image source
Svelte has an online editor so that you don’t need to open VSCode to develop your project which is pretty handy. Today we are gonna get random image from picsum.photos
and display in our page.
First create RandomImage.svelte
which is our child component. In script
section we declare src
, alt
variables for img
tag. Then we use fetch()
api to get the image source
<script>
let src = 'is loading...'
let alt = 'Random Image'
let API = 'https://picsum.photos/300' // use promise to get image source with fetch api
fetch(API).then(res => res.url) // If you prefer async/await method, you can do that also
async function loadImage() {
const res = await fetch(API)
src = await res.url
} loadImage()</script>
In html
section we put a h3
tag indicating the image source and display the image with img
tag
<h3>
The src is {src}
</h3>// If attribute and value are the same name, we can use shorthand expression like {src} {alt}
<img {src} {alt} />
In our App.svelte
, we import RandomImage.svelte
and display the image with RandomImage
component. We use display:grid
to make the layout look organized
<script>
import RandomImage from './RandomImage.svelte'
</script><!-- we can display as many images as we want -->
<RandomImage />
<RandomImage />
<RandomImage /><style>
.box {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
</style>
The results
And that’s it. You can also download the project to your local drive and start the local server to run and test it, ain’t it amazing !!!
Svelte Rocks !!!