fix (tutorial): use different random image service

pull/6154/head
Michael Rienstra 5 years ago
parent bcf2313a34
commit 04ed93af2f

@ -4,7 +4,7 @@
let photos = []; let photos = [];
onMount(async () => { onMount(async () => {
const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`); const res = await fetch(`https://picsum.photos/v2/list?limit=20`);
photos = await res.json(); photos = await res.json();
}); });
</script> </script>
@ -28,8 +28,8 @@
<div class="photos"> <div class="photos">
{#each photos as photo} {#each photos as photo}
<figure> <figure>
<img src={photo.thumbnailUrl} alt={photo.title}> <img src={photo.download_url.replace(/\/\d+\/\d+$/, '/128/128')} alt={photo.author}>
<figcaption>{photo.title}</figcaption> <figcaption>{photo.author}</figcaption>
</figure> </figure>
{:else} {:else}
<!-- this block renders when photos.length === 0 --> <!-- this block renders when photos.length === 0 -->

@ -21,8 +21,8 @@
<div class="photos"> <div class="photos">
{#each photos as photo} {#each photos as photo}
<figure> <figure>
<img src={photo.thumbnailUrl} alt={photo.title}> <img src={photo.download_url.replace(/\/\d+\/\d+$/, '/128/128')} alt={photo.author}>
<figcaption>{photo.title}</figcaption> <figcaption>{photo.author}</figcaption>
</figure> </figure>
{:else} {:else}
<!-- this block renders when photos.length === 0 --> <!-- this block renders when photos.length === 0 -->

@ -4,7 +4,7 @@
let photos = []; let photos = [];
onMount(async () => { onMount(async () => {
const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`); const res = await fetch(`https://picsum.photos/v2/list?limit=20`);
photos = await res.json(); photos = await res.json();
}); });
</script> </script>
@ -28,8 +28,8 @@
<div class="photos"> <div class="photos">
{#each photos as photo} {#each photos as photo}
<figure> <figure>
<img src={photo.thumbnailUrl} alt={photo.title}> <img src={photo.download_url.replace(/\/\d+\/\d+$/, '/128/128')} alt={photo.author}>
<figcaption>{photo.title}</figcaption> <figcaption>{photo.author}</figcaption>
</figure> </figure>
{:else} {:else}
<!-- this block renders when photos.length === 0 --> <!-- this block renders when photos.length === 0 -->

@ -15,7 +15,7 @@ We'll add an `onMount` handler that loads some data over the network:
let photos = []; let photos = [];
onMount(async () => { onMount(async () => {
const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`); const res = await fetch(`https://picsum.photos/v2/list?limit=20`);
photos = await res.json(); photos = await res.json();
}); });
</script> </script>

Loading…
Cancel
Save