Laravel 5.3 - Issue Displaying Images from Public Folder Using @Extends & @Sections

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

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:

Final Output

display image from storage laravel 5.3

Your controller should handle all the "behind the scenes" process, and your view only display html and php variables. That is the main point of the MVC pattern.

So your controller should return a view, and inject in its view the file path.

public function getUserImage($filename)
{
    $file = Storage::disk('public')->get($filename);

    return view('yourviewnamehere', ['myFile' => $file]);
}

Now, your view will be able to access the variable $myFile :

<!-- ... -->
    @if (Storage::disk('public')->has($user->first_name . '-' . $user->id . '.jpg'))
        <section class="row new-post">
            <div class="col-md-6 col-md-offset-3">
                <img src="{{ URL::to('img/' . $myFile) ]) }}" alt="Sample Image" class="img-responsive">
            </div>
        </section>
    @endif
<!-- ... -->

I assumed the file path for the images in public/img/, so feel free to change this part of the code. Also, whether your variable contains the suffix .jpg or not, you should add it or not.

Image not displaying in view. Laravel

This may be caused you are in a route which does not represent the base URL. You should generate the URL for your assets relative to the public/ folder. Use URL::asset('path/to/asset') to generate the URL.

{{ URL::asset("images/users/{$follower->id}/profilePictures/50thumb-{$follower->profilePicture->url}") }}

Or as @lukasgeiter mentioned you can simply use asset('path/to/asset') helper.

How can I access in views, images from storage folder in laravel

You need to use the syntax as

<img src='{{ asset("path-to-your-file") }}' alt='avatar'>

instead

<img src="{{ url('/') }}{{ $user->avatar }}" alt="avatar">

asset() points to public folder. path-to-your-file means the rest of the path

Edit

Additionally I have previously posted a similar answer. Please take a look at it too.

Dropzone no valid MIME type in backend Laravel?

The problem here is that the $request->files does not exist in the Laravel codebase. Since the Illuminate\Http\Request class extends the Symfony\Component\HttpFoundation\Request class, the files refers to the Symfony\Component\HttpFoundation\FileBag class which does happens to contain numerous Symfony\Component\HttpFoundation\File\UploadedFiles that do not have the store method.

Simple fix:
Replace $request->files with $request->allFiles() which should give you an array of Illuminate\Http\UploadedFile classes which have the store method

Feel free to shoot any questions in the comment section if you need further help

Laravel 5.3 - Issue Displaying Images from Public Folder Using @Extends & @Sections