Laravel 5.3 - 使用 @extends 和 @sections 显示来自公用文件夹的图像的问题答案

【问题标题】：Laravel 5.3 - Issue displaying Images from public folder using @extends & @sectionsLaravel 5.3 - 使用 @extends 和 @sections 显示来自公用文件夹的图像的问题
【发布时间】：2017-06-17 16:50:47
【问题描述】：

第二次更新：

由于某种原因，home.blade.php 中我的.header_table 中的display: 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

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

【问题讨论】：

你检查权限文件了吗？
尝试使用asset()并从源中删除“public/”
试试这个<img src="{{asset('images/image.jpg')}}">
Akkapong - 它以文本形式显示在我的网页上 - localhost:8000/images/max.jpg
图像图标是什么意思？这是你的图片路径your_project/public/images/max.jpg？

标签： css image laravel laravel-5.3

【解决方案1】：

如果您使用的是LaravelCollective'sHtml Facade，那么您在image path 中使用了一个额外的目录。

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

应该是：

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

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

编辑：

您正在使用： @extends('main')

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

但是你的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

routes/web.php：

<?php

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

我更喜欢使用@stop 而不是@endsection。你可以尝试两者来测试它。

希望对您有所帮助。未确认图像未渲染的原因。

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

最终输出：

【讨论】：

删除公共后没有图像，现在没有断开的链接/
@staredecisis 我刚刚尝试过并且正在为我工作。你能把你的公共目录快照发给我吗？
@staredecisis 你能发布你的<image src> url 里面的内容吗？
我的问题发生了变化。往上看。我应该提到这是通过局部视图完成的。有什么建议吗？
能否也添加@section 内容？

【解决方案2】：

最方便的存储和访问图像的方法是使用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)}}">

【讨论】：

【解决方案3】：

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

这应该适合你。

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

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

【讨论】：