css - Laravel 5.3-使用@extends和@sections显示来自公共(public)文件夹的图像的问题

第二次更新：

由于某种原因，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-路径已确认

views / pages / 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。然作曲家在那里更新。

我用过：

<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
编辑：添加了新的尝试

最佳答案

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

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

应该是：

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

正如Html Facade假定您位于public目录中，并从指定位置搜索图像。

编辑：

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

假设您在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>的内容？

最终输出：

css - Laravel 5.3-使用@extends和@sections显示来自公共(public)文件夹的图像的问题-LMLPHP

关于css - Laravel 5.3-使用@extends和@sections显示来自公共(public)文件夹的图像的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41971341/