Question

第二次更新：

由于某些原因，home.blade.php中display: table;中的.header_table阻止了图片呈现。

更新

我应该提到我正试图在@section ( i like to call them partials)内显示图像。当我访问我的main.blade.php并执行{{ Html::image('images/max.jpg') }}链接时，它显示我的图像没有问题。

我现在的问题：

如何在@section（部分）中显示图像？

project_name / public / images / max.jpg - 确认路径

视图/页/ home.blade.php

@extends('main')

@section('content')



    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>


    <script type="text/javascript" src="{{ URL::asset('js/fade.js') }}"></script>

    <!-- Styles -->
    <style>


        .header {
            height: 100%;
            width: 100%;
            background-color: ;
        }

        .header img {
            width: 500px;
        }

        .header_table {
            display: table;
        }



        .table {
            display: table-cell;
            height: 100%;
            width: 100%;
            padding-left: 40px;
            padding-top: 40px;

        }

        .table h1 {
            text-align: left;
            color: white;
            font-family: 'Raleway', sans-serif;
            font-size: 90px;
            margin-top: 2px;


        }

        .table p {
            text-align: left;
            color: black;
            font-family: 'Raleway', sans-serif;

        }

        .button {

            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 0 auto;
            cursor: pointer;
            margin-left: 90px;

        }

        .animate {
            padding-top: 4em;
            padding-bottom: 4em;
        }

        .animate img {
            position: relative;

        }

        .tablet {
            height: 280px;
        }



    </style>



    <div class="container">
        <div class="header header_table">
           {{ Html::image('images/max.jpg') }}
            <div class="table">
                <div id="title"><h1>Welcome</h1></div>
                <img src="{{asset('public/images/max.jpg')}}"></img>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <button class="button">Learn More</button>
                <button class="button">Sign-Up</button>
            </div>

        </div>
        <div class="animate">
            <img class="tablet" src="https://designcode.io/cloud/ios9-ipad/ipad.jpg">
        </div>
    </div>
@endsection

视图/供应商/ main.blade.php

    <body>

        <ul>
          <li class="logo"><img src="http://image.flaticon.com/teams/1-freepik.jpg"></li>  
          <li><a href="{{ url('gallery') }}">Gallery</a></li>
          <li><a href="{{ url('about') }}">About</a></li>
          <li><a href="{{ url('/') }}">Home</a></li>
        </ul>

    <div class="container">

    @yield('content')

    </div>


</body>

上：

我只想尝试显示保存在项目中的图像。

我按照这个（https://laravelcollective.com/docs/5.2/html）来更新我的composer.json文件和app.php。 Ran作曲家在那之后更新。

我已经使用过：

<img src="public/images/image.jpg">
{{ Html::image('public/images/max.jpg') }}
{{ HTML::image('public/images/max.jpg') }}
{{!! Html(or HTML)::image('public/images/max.jpg') !!}}

现在：

{{URL::asset("public/images/max.jpg")}}
{{ Html::image('images/max.jpg') }}

我不断获得该图片图标，但没有图片。与此人的经历类似（Image not displaying in view. Laravel）。当我通过asset()方法尝试该答案的建议时，它无法正常工作。

有什么建议吗？

编辑：将image.jpg更改为max.jpg 编辑：添加了新的尝试

Answer 1

最方便的存储和访问图片的方法是使用Laravel filesystems。

首先，您需要设置文件驱动程序驱动程序config/filesystems.php

'public' => [
    'driver' => 'local',
    'root' => storage_path('app/public'),
    'visibility' => 'public',
],

这样您就可以将图像存储在storage/app/public

中

假设您将图像存储在storage/app/public/your_storage_directory目录中。所以做如下。

$image = request()->file('banner');
$path = $image->store('your_storage_directory', 'public');
// persist $path in your table

$path将包含your_storage_directory/3ca37bc0cdf2f71eeadf60057c71154b.jpeg

的某些字形

然后做

php artisan storage:link

在public目录中创建指向storage/app/public

的符号链接

然后您只需使用以下语法

从刀片文件访问该图像

<img src="{{asset($path)}}">

Answer 2

要生成路径直到public目录，您必须使用asset()辅助方法，要显示图像，您必须在img src 中回显该路径属性。

这应该适合你。

<img src="{{asset('images/max.jpg')}}">

假设你在your_project/public/images/max.jpg中有max.jpg。
希望这有帮助！

Answer 3

如果您使用LaravelCollective's Html Facade，则在image path中使用了额外的目录。

{{ Html::image('public/images/max.jpg') }}

应该是：

{{ Html::image('images/max.jpg') }}

作为Html Facade假设您在public目录中并从指定位置搜索图像。

修改

您正在使用： @extends（ '主'）

假设您main.blade.php中有resources/views/main。

但是你的main.blade.php内有views/vendor/main.blade.php

你可以尝试：

@extends(vendor.main)

你也做错了什么。您正在将子视图中的所有scripts and css添加到父视图。

当您使用此格式时，它会呈现为html的这种形式。

更新示例：

我的观点路径：

|-resources |- views |- pages |- home.blade.php |- welcome.blade.php

<强> welcome.blade.php

<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="flex-center position-ref full-height"> <div class="col-md-12"> <p>Image from Parent</p> {{ Html::image('images/capture.png') }} </div> <div class="content"> @yield('content') </div> </div> </body> </html>

<强> home.blade.php：

@extends('welcome') @section('content') <div class="col-md-12"> <p>This is a child view.</p> {{ Html::image('images/capture.png') }} </div> @stop

<强>路由/ web.php：

<?php Route::get('/', function () { return view('pages.home'); });

我更喜欢使用@stop代替@endsection。您可以尝试两者来测试它。

希望它对你有所帮助。未确认图像未呈现的原因。

如果不呈现，您是否可以从浏览器添加<image src>的内容？

最终输出：

Laravel 5.3 - 使用@extends＆amp; amp;显示公共文件夹中的图像的问题@sections

3 个答案: