Ng-lazyload-image: A imagem padrão não é visível

Oi,

A página de exemplo estava usando o seguinte estilo css:

img {
  opacity: 0;
}
img.ng2-lazyloaded {
  opacity: 1;
}

por exemplo, a intenção era ocultar a imagem (e a imagem padrão) até que a imagem carregada lentamente fosse carregada.

No entanto, se você remover opacity: 0; deverá ser capaz de ver a imagem padrão antes que a imagem carregada lentamente seja carregada.

Eu atualizei a página de exemplo com mais alguns exemplos. Vá para http://tjoskar.github.io/ng2-lazyload-image/ e clique em "Imagem padrão" para ver um exemplo de uso de imagens padrão.
Se você estiver usando o Chrome, também pode usar o "controle de rede" nas ferramentas de desenvolvimento para simular um tempo de carregamento mais longo.

Eu respondi sua pergunta?

Você tem um código de exemplo aqui: https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts

@tjoskar Eu tentei de tudo, ainda não está funcionando, a imagem padrão não aparece e o caminho está correto porque se eu substituir a imagem do lazyloder pela imagem padrão e a imagem padrão carregar, o problema é quando eu marquei ferramenta google chrome inspector, vejo que não há onde a imagem padrão foi anexada ao atributo src da imagem, em vez disso, a imagem lazyloader é anexada por padrão. Por favor, existe alguma outra maneira de contornar isso? Esperando por sua resposta.

Obrigado

@kelvinrolex , não tenho certeza se entendi. Se a imagem que deve ser lazyloaded já estiver no cache do navegador, a imagem padrão nunca estará visível. O algoritmo segue:

1. Definir imagem padrão para src
2. Verifique se a imagem está na janela de visualização

2.1 Se a imagem estiver na janela de visualização, baixe a imagem lazyloaded
2.1.1 Quando a imagem lazyloaded for baixada, defina a imagem lazyloaded para src
2.2 Caso contrário, vá para 2

Gravei um vídeo para mostrar como a imagem padrão é carregada: https://www.youtube.com/watch?v=p4hds8Au_qI

Você tem um trecho de código que possa compartilhar para que eu possa entender melhor o que você está tentando fazer?

Obrigado

Parece que tenho o mesmo problema. Se eu usar [src] = "defaultImage" (e, claro, tem uma propriedade defaultImage), o atributo src da tag img não é escrito antes que a imagem seja carregada (entra na porta de visualização).

Se eu não usar vinculação de propriedade (por exemplo:

@taseroth , Desculpe pela resposta tardia. Qual navegador e sistema operacional você está usando? Não consigo reproduzir isso no Chrome / Firefox / Safari no macOS.
Só para ficar claro; se você visitar http://tjoskar.github.io/ng2-lazyload-image/fade-in-image e depois clicar no link "imagem padrão". Você não está vendo nenhuma foto na gaiola de Nicolas, então?

Eu tenho o mesmo problema. A imagem padrão é nod renderizada (somente se eu colocá-la explicitamente com "src" e url de espaço reservado codificado).
Também notei que "scrollspy" não está funcionando corretamente, algumas vezes o lasyload carrega os primeiros 2 ou 3 elementos e
todos os outros permanecerão inalterados mesmo após a rolagem "intensa" do XD. O parâmetro de deslocamento parece não afetar esse problema. Há um truque: se eu recarregar a página e rolar para baixo antes que os contaners sejam carregados, ele carrega todas as imagens ...
Não há erros no console ou durante a compilação.

@ bsh314 , eu não entendo.

A imagem padrão é nod renderizada (somente se eu colocá-la explicitamente com "src" e url de espaço reservado codificado).

Você deve usar src para a imagem padrão.
Digamos que você esteja usando o seguinte código: <img [src]="defaultImage" [lazyLoad]="image"> . O Angular irá compilar isso e dar <img src="default-image.jpg"> ao navegador (dado defaultImage = 'default-image.jpg' ) e quando a imagem estiver na janela de visualização, a diretiva (ng2-lazyload) atualizará o nó da imagem para <img src="lazyload-image.jpg"> (dado image = 'lazyload-image.jpg' ).

Também notei que "scrollspy" não está funcionando corretamente ...

Você está se referindo a bootstraps scrollspy ? Você pode reproduzir o erro sem scrollspy?

@tjoskar Não, não estou usando bootstrap, era apenas uma forma de nomear esse tipo de funcionalidade.
Meu problema de imagem padrão:
<img src="default-image.jpg" [lazyLoad]="image"> -> isso funciona
<img [src]="defaultImage" [lazyLoad]="image"> -> isto não funciona
Obrigado pela resposta!

Eu tenho o mesmo problema. Só funciona se o url img estiver codificado no modelo.
Você o codificou em seu exemplo:

// https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts
<img
        *ngFor="let image of images"
        src="https://www.placecage.com/1000/1000"
        [errorImage]="errorImage"
        [lazyLoad]="image">

Edit: E talvez também funcione se AOT puder codificar a url no modelo para você. No meu caso, recebo o URL da imagem padrão da minha chamada anterior à API, por isso é dinâmico. Meu objetivo é usar a imagem padrão como visualização de baixa qualidade e imagem de alta qualidade de carregamento lento para substituí-la.

@filipsuk : sim, esse parece ser o problema. Não acredito que perdi esse detalhe.

Este problema deve ser resolvido na versão 2.3.2 . Por favor, tente.

@tjoskar O problema parece ter sido corrigido em 2.3.2. Muito obrigado pelo seu trabalho! :)

Eu vou fechar isso agora. Informe se algum de vocês ainda tem o problema.