No puedo encontrar una manera de hacer mi trabajo de código de Esbelta. El código consiste en una matriz de objetos

Question 1

Es una sola línea de código, he intentado un montón de enfoques, pero yo simplemente no puede obtener el resultado que quiero.

¿Qué quiero?

Quiero establecer el atributo loading = lazy a partir del segundo elemento de la matriz. He intentado un montón de cosas, mi última tentación era utilizar el ID del post. Pero no funciona. Mira 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

Si post.image es trueel else if nunca será activada/ejecutado. Usted podría simplificar esta siempre la configuración de la loading atributo. Personalmente creo que esta es más fácil de entender porque usted realmente quiere hacer lo mismo para cada elemento que tiene 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

Si post.image es trueel else if nunca será activada/ejecutado. Usted podría simplificar esta siempre la configuración de la loading atributo. Personalmente creo que esta es más fácil de entender porque usted realmente quiere hacer lo mismo para cada elemento que tiene 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}

Muchas gracias, Félix! Voy a utilizar este enfoque a partir de ahora. Gracias!

No puedo encontrar una manera de hacer mi trabajo de código de Esbelta. El código consiste en una matriz de objetos

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría