图像未在 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:[email protected]"><i class="fa fa-envelope-o"></i>[email protected]</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

了解更多信息这里。

Answer 3

尝试使用此功能，您是否尝试在浏览器或 PDF 中显示图像。 如果是 PDF，则必须使用绝对 URL，其中图像已上传到在线服务器。