I have an issue where my images are not showing in incognito mode while on a default browser it was showing fine. When I took a look into the code this was what it shows.
However in my html and js I've never implemented anything to manipulate my image visibility. Could someone please explain how this happened and what I should do to prevent it?
here's the html
<section class="app-flow position-relative" id="app_flow">
<div class="col-md-5 position-relative flowsub-1-bg">
<img class="img-fluid animated wow slideInLeft phone-eg" src="{{ asset('img/landing/flow1-1.png') }}" title="flow1-1" alt="flow1-1">
<img class="img-fluid position-absolute d-none d-md-block" src="{{ asset('img/landing/flow1-2.png') }}" title="flow1-2" alt="flow1-2">
</div>
</div>
<div class="flow-sub d-flex flex-column flex-md-row justify-content-between">
<div class="d-flex flex-column col-md-5 app-flow-instruct">
<h4>Display 1</h4>
<p>Initial stage of setting up</p>
<div class="appflow-icon">
<img class="img-fluid" src="{{ asset('img/landing/flow1-icon.png') }}" title="flow1-icon" alt="flow1-icon">
</div>
</div>
<div class="col-md-5 position-relative flowsub-2-bg">
<img class="img-fluid animated wow slideInRight phone-eg" src="{{ asset('img/landing/flow2-1.png') }}" title="flow2-1" alt="flow2-1">
<img class="img-fluid position-absolute wow slideInRight d-none d-md-block" src="{{ asset('img/landing/flow2-2.png') }}" title="flow2-2" alt="flow2-2">
<img class="img-fluid position-absolute wow slideInRight" src="{{ asset('img/landing/flow2-3.png') }}" title="flow2-3" alt="flow2-3">
</div>
</div>
<div class="flow-sub d-flex flex-column flex-md-row justify-content-between">
<div class="d-flex flex-column col-md-5 order-md-3 app-flow-instruct">
<h4>Display 2</h4>
<p>Phase 2 of initiation</p>
<div class="appflow-icon">
<img class="img-fluid" src="{{ asset('img/landing/flow2-icon.png') }}" title="flowflow2-icon" alt="flow2-icon">
</div>
</div>
</div>
</div>
</section>
and my js
$(function () {
new WOW().init();
$('video').on('click touch', function () {
this.paused ? this.play() : this.pause();
});
$('input').focusout(function (e) {
/*check if val length is empty, or if type is email and does not contain @ and .*/
if ($(this).val().length < 1 || ($(this).attr('type') == "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($(this).val()))) {
$(this).parent().find('.message').show();
$(this).parent().addClass('is-invalid');
} else {
/*remove the is-invalid class and message error if the input is not empty*/
$(this).parent().find('.message').hide();
$(this).parent().removeClass('is-invalid');
}
});
$('input').bind('keypress', function (e) {
$(this).parent().removeClass('is-invalid');
});
$('.modal-open').click(function (e) {
e.preventDefault();
$('.modal').addClass('fadeOutUp');
});
});
Not sure where that inline styling was being triggered by