Laravel 5.3 - Issue displaying Images from public

2019-01-29 04:44发布

站内文章 / HTML/CSS

26 0

仙女界的扛把子

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

2nd Update:

For some reason the display: table; in my .header_table within home.blade.php was preventing the image from rendering.

UPDATE:

I should have mentioned that I am trying to display an image within a @section ( i like to call them partials). When I went to my main.blade.php and did the {{ Html::image('images/max.jpg') }} link it displayed my image with no issue.

My questions now:

How do I display an image within a @section (partial)?

project_name/public/images/max.jpg - path confirmed

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>

Previous:

I'm just trying to display an image that is saved within my project.

I followed this (https://laravelcollective.com/docs/5.2/html) to update my composer.json file and app.php. Ran composer update there after.

I've used :

<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') !!}}

Now:

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

and I keep getting that image icon, but no image. Similar to what this person experienced (Image not displaying in view. Laravel). When I try that answer's advice by doing the asset() method, it doesn't work.

Any suggestions?

Edit: changed image.jpg to max.jpg Edit: added new attempts

回答1:

If you are using LaravelCollective's Html Facade, you have used an extra directory in your image path.

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

Which should be:

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

As Html Facade suppose you are inside the public directory and searches the image from the specified location.

Edit:

You are using: @extends('main')

It supposes you have a main.blade.php in your resources/views/main.

But you have your main.blade.php inside views/vendor/main.blade.php

You could try:

@extends(vendor.main)

Also you are doing something wrong. You are adding all the scripts and css from the child view to parent view.

When you are using in this format it renders to this form of your html.

Updated Example:

My views path:

|-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');
});

I prefer using @stop instead of @endsection. You could try both to test it.

Hope it helps you. Not confirmed why the image is not rendered.

If it doesn't render could you add the content of <image src> from your browser?

Final Output:

回答2:

Most convenient way to way to store and access images is by using Laravel filesystems.

First you got to set up your file driver driver config/filesystems.php

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

This will enable you to store your images in storage/app/public

Lets say you are storing images in storage/app/public/your_storage_directory directory. So do as follows.

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

$path will contain someting simillar to your_storage_directory/3ca37bc0cdf2f71eeadf60057c71154b.jpeg

Then do

php artisan storage:link

To create a symbolic link at public directory pointing to storage/app/public

Then you only got to do is access the image from your blade file by using following syntax

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

回答3:

To generate path till public directory you have to use asset() helper methord, and to display image you have to echo that path inside img src attribute.

This should work for you.