Eu não consigo encontrar uma maneira de fazer o meu trabalho de código em Svelte. O código envolve um conjunto de objetos

Question 1

É uma única linha de código, eu tentei um monte de abordagens, mas eu simplesmente não consigo obter o resultado que eu quero.

O que eu quero?

Eu quero definir o atributo loading = lazy a partir do segundo item na matriz. Eu tentei um monte de coisas, a minha última tentação foi a de usar o ID do post. Mas não funciona. Olhar 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 é trueo else if nunca será verificada/executado. Você pode simplificar esta por definição sempre o loading atributo. Pessoalmente eu acho isso mais fácil de entender porque você realmente quer fazer a mesma coisa para cada elemento que tem um 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 é trueo else if nunca será verificada/executado. Você pode simplificar esta por definição sempre o loading atributo. Pessoalmente eu acho isso mais fácil de entender porque você realmente quer fazer a mesma coisa para cada elemento que tem um 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}

Muito obrigado, Felix! Vou usar essa abordagem, a partir de agora. Obrigado!

Eu não consigo encontrar uma maneira de fazer o meu trabalho de código em Svelte. O código envolve um conjunto de objetos

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria