I have been reading the docs for the past 2 days and trying everything that comes in mind. Yet I am not able to get Lazy loading image to work
when change the login state to true the image layout is shown but the image is not loading
<div class="page-content" id='account-page'>
{{#if login}}
<div class="block" style="text-align: center">
<img placeholder="img/user.png" class="circle lazy lazy-fade-in" data-src="http://fusiontechph.com/iSyudad/renzApi/upload/uploads/1578399990.jpg" width="100" height="100" style="border-radius: 50%">
</div>
<div class="block-title" style="text-align: center">
Renz Carlo Salanga
</div>
<div class="list">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Delivery Address</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Account Profile</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Logout</div>
</div>
</a>
</li>
</ul>
{{else}}
<div class="block-title" style="text-align: center">
Login
</div>
<div class="list">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="f7-icons">logo_facebook</i></div>
<div class="item-inner">
<div class="item-title">Login with facebook</div>
</div>
</a>
</li>
<li>
<a href="/register/" class="item-link item-content">
<div class="item-media"><i class="f7-icons">folder_badge_plus</i></div>
<div class="item-inner">
<div class="item-title">Register an account</div>
</div>
</a>
</li>
</ul>
</div>
{{/if}}
</div>
</div>
also after changing the login variable to true by using the state function i initialize the lzay load manually
pageAfterIn: function(e, page){
var self = this;
var app = self.$app;
//self.login = self.$app.data.login;
self.$setState({
login: app.data.login
});
app.lazy.create(document.getElementById('account-page'))
}