图像未在 Laravel Blade 中显示

Question

我正在做一个简单的 Laravel 项目，我想在 laravel Blade 中显示来自 public 目录的图像，但它显示的是空白屏幕而不是图像，下面是有关我的项目的屏幕截图和信息。

这是我的图片路径：

刀片文件在这里：

在上面的文件中，我尝试了images/file.pnj 和/images/file.png，但都没有为我工作。

这里是nav.blade.php 代码：

    <!--HEADER START-->
<header>
    <div class="top-strip">
        <div class="container">
            <div class="site-info">
                <ul>
                    <li><a href="mailto:Info@bookguide.com"><i class="fa fa-envelope-o"></i>Info@bookguide.com</a></li>
                    <li><a href="#"><i class="fa fa-heart"></i></a></li>
                    <li><a href="#"><i class="fa fa-shopping-cart"></i></a></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">
                <a href="#"><img src="images/logo.png" alt=""></a>
            </div>
            <!--LOGO END-->
            <div class="kode-navigation">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about-us.html">About Us</a></li>
                    <li><a href="blog.html">Our Blog</a>
                        <ul>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="blog-full.html">Blog Full</a></li>
                            <li><a href="blog-detail.html">Blog Detail</a></li>
                        </ul>
                    </li>
                    <li class="last"><a href="authors.html">Teams</a>
                        <ul>
                            <li><a href="authors.html">Author</a></li>
                            <li><a href="author-detail.html">Author Detail</a></li>                             
                        </ul>
                    </li>
                    <li><a href="book-listing.html">Products</a>
                        <ul>
                            <li><a href="book-listing.html">Products Style 1</a></li>
                            <li><a href="book-listing-1.html">Products Style 2</a></li>
                            <li><a href="book-listing-2.html">Products Style 3</a></li>
                            <li><a href="book-listing-1-w-sidebar.html">Product 2 W/S</a></li>
                            <li><a href="book-listing-2-w-sidebar.html">Product 3 W/S</a></li>                              
                            <li><a href="book-detail.html">Product Detail</a></li>
                        </ul>
                    </li>
                    <li class="last"><a href="contact-us.html">Contact Us</a></li>
                </ul>
            </div>
            <div id="kode-responsive-navigation" class="dl-menuwrapper">
                <button class="dl-trigger">Open Menu</button>
                <ul class="dl-menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about-us.html">About Us</a></li>
                    <li class="menu-item kode-parent-menu"><a href="blog.html">Our Blog</a>
                        <ul class="dl-submenu">
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="blog-full.html">Blog Full</a></li>
                            <li><a href="blog-detail.html">Blog Detail</a></li>
                        </ul>
                    </li>
                    <li class="menu-item kode-parent-menu last"><a href="authors.html">Teams</a>
                        <ul class="dl-submenu">
                            <li><a href="authors.html">Author</a></li>
                            <li><a href="author-detail.html">Author Detail</a></li>                             
                        </ul>
                    </li>
                    <li class="menu-item kode-parent-menu last"><a href="book-listing.html">Products</a>
                        <ul class="dl-submenu">
                            <li><a href="book-listing.html">Products Style 1</a></li>
                            <li><a href="book-listing-1.html">Products Style 2</a></li>
                            <li><a href="book-listing-2.html">Products Style 3</a></li>
                            <li><a href="book-listing-1-w-sidebar.html">Product 2 W/S</a></li>
                            <li><a href="book-listing-2-w-sidebar.html">Product 3 W/S</a></li>                              
                            <li><a href="book-detail.html">Product Detail</a></li>
                        </ul>
                    </li>
                    <li class="last"><a href="contact-us.html">Contact Us</a></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">
                    <a href="#">Start Now</a>
                    <a href="#">Buy Now</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--BUT NOW END-->  

当我检查 chrome 中的图像并将鼠标悬停在其上时，它会正确显示在那里：

这是layout.blade.php 文件：

<!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>  

注意：有趣的是，有时会显示图像，但大多数时候，我看到的是空白页而不是图像。

当我在浏览器中打开页面时，一切正常，但没有显示横幅图像，而是看到一个白屏。任何帮助都是高级的。

Answer 1

在图片前添加“/”。试试这样<img src="/images/cards.png" alt="">

Answer 2

Laravel 提供了一个非常简洁的辅助函数（即asset）来引用public 目录的内容。您可以使用asset函数来添加图像的完全限定的公共url，而不是执行url()。

您可以使用asset 函数，例如：

$url = asset('img/photo.jpg'); // http://example.com/assets/img/photo.jpg

了解更多信息here。