2017-02-01 42 views
0

月2日更新:Laravel 5.3 - 問題顯示使用@extends&@sections公共文件夾的圖像

出於某種原因,display: table;.header_table home.blade.php內被阻止渲染圖像。

UPDATE:

我應該提到,我想顯示@section (i like to call them partials)內的圖像。當我去我的main.blade.php並做了{{ Html::image('images/max.jpg') }}鏈接它顯示我的圖像沒有問題。

我現在的問題:

如何在@section內顯示圖像(部分)?

PROJECT_NAME /公/圖片/ 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。之後,冉作曲家在那裏更新。

我用:

<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 編輯:增加了新的嘗試

+0

您是否檢查權限文件? –

+1

嘗試使用資產()並從源文件中刪除「public /」 –

+1

試試這個「」 –

回答

0

如果您使用的是LaravelCollective'sHtml門面,您在image path中使用了額外的目錄。

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

這應該是:

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

由於Html門面假設你是public目錄內,並從指定位置搜索圖像。

編輯:

您正在使用: @extends( '主')

它假定你有你的resources/views/main一個main.blade.php

但你有你的main.blade.phpviews/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>的內容?

最終輸出:

Final Output

+0

沒有圖像,現在沒有斷開連接後刪除公衆/ – staredecisis

+1

@staredecisis我剛剛嘗試過,併爲我工作。你可以發佈我的公共目錄快照嗎? – PaladiN

+0

@staredecisis你可以發佈什麼是你的''網址? – PaladiN

0

要生成直到public目錄,你必須使用asset()幫手methord, 並顯示圖像,你必須回顯路徑內部路徑imgsrc 屬性。

這應該適合你。

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

假設你在your_project/public/images/max.jpg有max.jpg。
希望這有助於!

0

最便捷的方式的方式來存儲和訪問圖像是使用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)}}"> 
相關問題