Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
894 views
in Technique[技术] by (71.8m points)

css - Laravel 5.3 - Issue displaying Images from public folder using @extends & @sections

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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)}}">

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...