Non riesco a trovare un modo per rendere il mio codice di lavoro in Svelte. Il codice prevede un array di oggetti

Question 1

Si tratta di una singola riga di codice, ho provato un sacco di approcci, ma proprio non riesco a ottenere il risultato che voglio.

Cosa voglio?

Voglio impostare l'attributo loading = lazy a partire dal secondo elemento dell'array. Ho provato un sacco di cose, la mia ultima tentazione era di utilizzare l'ID del post. Ma non funziona. Guarda else if.

<script>
    // post props
    export let post;
</script>

<!--HTML here-->
<div>
    <!-- display posts images -->
    {#if post.image}
        <!--check if image is not empty -->
        <img src={post.image.formats.medium.url} alt={post.title} />
        <!-- if id is greater than 2 add loading="lazy" -->
    {:else if post.id > 2}
        <!-- set lazy images -->
        <img src={post.image.formats.medium.url} alt={post.title} loading="lazy" />
    {:else}
        <!-- if no images then placeholder -->
        <img src="images/900x600.png" alt={post.title} loading="lazy" />
    {/if}

Question 2

Se post.image è trueil else if non sarà mai controllato/eseguito. Si potrebbe semplificare questo da sempre l'impostazione del loading attributo. Personalmente trovo che questo sia più facile capire perché si vuole realmente fare la stessa cosa per ogni elemento che ha un image.

{#if post.image}
    <!--check if image is not empty -->
    <img src={post.image.formats.medium.url} alt={post.title} loading={post.id > 2 ? 'lazy' : 'eager'} />
{:else}
    <!-- if no images then placeholder -->
    <img src="images/900x600.png" alt={post.title} loading="lazy" />
{/if}

Felix Kling · Answer 1 · 2021-11-23T12:54:44

Se post.image è trueil else if non sarà mai controllato/eseguito. Si potrebbe semplificare questo da sempre l'impostazione del loading attributo. Personalmente trovo che questo sia più facile capire perché si vuole realmente fare la stessa cosa per ogni elemento che ha un image.

{#if post.image}
    <!--check if image is not empty -->
    <img src={post.image.formats.medium.url} alt={post.title} loading={post.id > 2 ? 'lazy' : 'eager'} />
{:else}
    <!-- if no images then placeholder -->
    <img src="images/900x600.png" alt={post.title} loading="lazy" />
{/if}

Grazie mille, Felix! Io uso questo approccio da ora in poi. Grazie!

Non riesco a trovare un modo per rendere il mio codice di lavoro in Svelte. Il codice prevede un array di oggetti

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria