Images are not being displayed in Laravel Blade - laravel

Question

I am working on a simple Laravel project where I want to display images from the public directory in laravel blade but it is showing a blank white screen instead of the images, below are the screenshots and information about my project.
This is my path to images:
The blade file is here:
In the above file, I tried both images/file.pnj and /images/file.png but neither worked for me.
Here is the nav.blade.php code:
<!--HEADER START-->
<header>
<div class="top-strip">
<div class="container">
<div class="site-info">
<ul>
<li><i class="fa fa-envelope-o"></i>Info#bookguide.com</li>
<li><i class="fa fa-heart"></i></li>
<li><i class="fa fa-shopping-cart"></i></li>
<li><a id="search-box" href="#"><i class="fa fa-search"></i></a></li>
</ul>
</div>
</div>
</div>
<!--Search Overlay Box Starts -->
<div id="kode_search_box" class="kode_search_box">
<form class="kode_search_box-form">
<input class="kode_search_box-input" type="search" placeholder="Search..."/>
<button class="kode_search_box-submit" type="submit">Search</button>
</form>
<span class="kode_search_box-close"></span>
</div><!-- /kode_search_box -->
<div class="overlay"></div>
<div class="logo-container">
<div class="container">
<!--LOGO START-->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!--LOGO END-->
<div class="kode-navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Blog
<ul>
<li>Blog</li>
<li>Blog Full</li>
<li>Blog Detail</li>
</ul>
</li>
<li class="last">Teams
<ul>
<li>Author</li>
<li>Author Detail</li>
</ul>
</li>
<li>Products
<ul>
<li>Products Style 1</li>
<li>Products Style 2</li>
<li>Products Style 3</li>
<li>Product 2 W/S</li>
<li>Product 3 W/S</li>
<li>Product Detail</li>
</ul>
</li>
<li class="last">Contact Us</li>
</ul>
</div>
<div id="kode-responsive-navigation" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li>Home</li>
<li>About Us</li>
<li class="menu-item kode-parent-menu">Our Blog
<ul class="dl-submenu">
<li>Blog</li>
<li>Blog Full</li>
<li>Blog Detail</li>
</ul>
</li>
<li class="menu-item kode-parent-menu last">Teams
<ul class="dl-submenu">
<li>Author</li>
<li>Author Detail</li>
</ul>
</li>
<li class="menu-item kode-parent-menu last">Products
<ul class="dl-submenu">
<li>Products Style 1</li>
<li>Products Style 2</li>
<li>Products Style 3</li>
<li>Product 2 W/S</li>
<li>Product 3 W/S</li>
<li>Product Detail</li>
</ul>
</li>
<li class="last">Contact Us</li>
</ul>
</div>
</div>
</div>
</header>
<!--HEADER END-->
<!--BANNER START-->
<div class="kode-banner">
<ul class="bxslider">
<li>
<img src="{{ url('images/banner-1.png') }}" alt="">
<div class="kode-caption">
<h2>book guide</h2>
<h5>online books store</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor<br>emque laudantium, totam rem aperiam.ipsam voluptatem.</p>
<div class="input-container">
<input type="text" placeholder="Enter Your Book Title Here">
<button><i class="fa fa-search"></i></button>
</div>
</div>
</li>
<li>
<img src="{{ url('images/banner-2.png') }}" alt="">
<div class="kode-caption">
<h2>book Reading</h2>
<h5>Best Book Available</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor<br>emque laudantium, totam rem aperiam.ipsam voluptatem.</p>
<div class="input-container">
<input type="text" placeholder="Enter Your Book Title Here">
<button><i class="fa fa-search"></i></button>
</div>
</div>
</li>
<li>
<img src="{{ url('images/banner-3.png') }}" alt="">
<div class="kode-caption">
<h2>Book Store</h2>
<h5>Books Guiders</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor<br>emque laudantium, totam rem aperiam.ipsam voluptatem.</p>
<div class="input-container">
<input type="text" placeholder="Enter Your Book Title Here">
<button><i class="fa fa-search"></i></button>
</div>
</div>
</li>
</ul>
</div>
<!--BANNER END-->
<!--BUT NOW START-->
<section class="buy-template">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>The World's Largest online bookstore</h2>
<p>Here you can get the Ebooks easily where are available in our stock. </p>
</div>
<div class="col-md-6">
<div class="kode-btns">
Start Now
Buy Now
</div>
</div>
</div>
</div>
</section>
<!--BUT NOW END-->
When I inspect the image in chrome and hover on it, it is displayed correctly there:
Here is the layout.blade.php file:
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from kodeforest.net/html/books/store/index.html by HTTrack Website Copier/3.x
[XR&CO'2014], Fri, 22 May 2020 03:48:28 GMT -->
<head>
#include('partials.header')
#yield('styles')
</head>
<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!--WRAPPER START-->
<div class="wrapper kode-home-page">
#include('partials.nav')
#yield('content')
#include('partials.footer')
<div class="copyrights">
<div class="container">
<p>Copyrights © 2015-16 KodeForest. All rights reserved</p>
<div class="cards"><img src="images/cards.png" alt=""></div>
</div>
</div>
</div>
<!--WRAPPER END-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ url('js/app.js') }}"></script>
<script src="{{ url('js/jquery.min.js') }}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ url('js/bootstrap.min.js') }}"></script>
<script src="{{ url('js/jquery.bxslider.min.js') }}"></script>
<script src="{{ url('js/bootstrap-slider.js') }}"></script>
<script src="{{ url('js/waypoints.min.js') }}"></script>
<script src="{{ url('js/jquery.counterup.min.js') }}"></script>
<script src="{{ url('js/dl-menu/modernizr.custom.js') }}"></script>
<script src="{{ url('js/dl-menu/jquery.dlmenu.js') }}"></script>
<script src="{{ url('js/classie.js') }}"></script>
<script src="{{ url('js/functions.js') }}"></script>
</body>
<!-- Mirrored from kodeforest.net/html/books/store/index.html by HTTrack Website Copier/3.x
[XR&CO'2014], Fri, 22 May 2020 03:53:23 GMT -->
</html>
Note: The interesting point is that sometimes the images are displayed but most of the times, I see blank white page instead of the images.
When I open the page in the browser, everything works fine but the banner images are not displayed and instead I see a white screen. Any help is appreciated in advanced.

Answer 1

Add '/' before images. Try Like this <img src="/images/cards.png" alt="">

Answer 2

Laravel provides a very neat helper function (ie asset) to refer the contents of public directory. Instead of doing url(), you can use the asset function to add the fully qualified public url of the image.
You can use asset function like:
$url = asset('img/photo.jpg'); // http://example.com/assets/img/photo.jpg
Lear more about it here.