iboosensei's avatar

Can't display images

I am working on a tutorial of a photo album application. I can already upload the images in the defaut folder of the app (storage/app/public/album_covers). But when i try to display the images in the app, its don't work. I don't understand what's wrong.

here is my index page

@extends('layouts.app')

@section('content')
    @if (count($albums) > 0)
        <?php 
            $colcount = count($albums);
            $i = 1;
        ?>

        <div id="albums">
            <div class="row text-center">
                @foreach ($albums as $album)
                    @if ($i == $colcount)
                        <div class="medium-4 colums end">
                            <a href="/albums/{{$album->id}}">
                                <img class="thumbnail" src="storage/app/public/album_covers" alt="{{$album->name}}">
                            </a>
                            <br>
                            <h4>{{$album->name}}</h4>
                    @else
                        <div class="medium-4 colums">
                            <a href="/albums/{{$album->id}}">
                                <img class="thumbnail" src="storage/app/public/album_covers" alt="{{$album->name}}">
                            </a>
                            <br>
                            <h4>{{$album->name}}</h4>

                        </div> 
                    @endif
                    @if ($i % 3 === 0)
                        </div><div class="row text-center"></div>
                    @else
                        </div>
                    @endif
                    
                    <?php $i++; ?>
                @endforeach
            </div>
        </div>
    @else
        <p>No Album To Display</p>    

        
    @endif    

@endsection

The AlbumController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Album;

class AlbumsController extends Controller
{
    public function index() {
        $albums = Album::with('Photos')->get();
        return view('albums.index')->with('albums', $albums);
    }

    public function create() {
        return view('albums.create');
    }

    public function store(Request $request){
        $this->validate($request, [
            'name' => 'required',
            'cover_image' => 'image|max:1999',
        ]);

        // Get the filename with extension
        $filenameWithExt = $request->file('cover_image')->getClientOriginalName();

        // Get just the filename
        $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);

        // Get the extension
        $extension = $request->file('cover_image')->getClientOriginalExtension();

        // Create new filename
        $filenameToStore = $filename.'_'.time().'.'.$extension;


        // Upload Image
        $path = $request->file('cover_image')->storeAs('public/album_covers', $filenameToStore);

        // Create Album
        $album = new Album;

        $album->name = $request->input('name');
        $album->description = $request->input('description');
        $album->cover_image = $filenameToStore;

        $album->save();

        return redirect('/albums')->with('success','Album created');
    }

    public function show($id){
        $album = Album::with('Photos')->find('$id');
        return view('albums.show')->with('album', $album);
    }

}

and my Create Album page

@extends('layouts.app')

@section('content')
    <div class="container">
        <h3>
            Create Album
        </h3>
        <form action="{{route('storealbums')}}" method="POST" enctype="multipart/form-data">
            @csrf

            @component('components.form.input', [
                'name' => 'name',
                'label' => 'name',
                'class' => 'form-control',
                'placeholder' => 'Album name',
            ])@endcomponent

            @component('components.form.textarea', [
                'name' => 'description',
                'label' => 'description',
                'content' => '',
                'class' => 'form-control',
                'placeholder' => 'Album description',
            ])@endcomponent

            @component('components.form.input', [
                'type'=> 'file',
                'name' => 'cover_image',
                'class' => 'form-control',
            ])@endcomponent
                
            @component('components.form.input', [
                'name' => 'submit',
                'type' => 'submit',
                'value' => 'submit',
                'class' => 'btn btn-primary',
            ])@endcomponent

        </form>
    </div>
@endsection
0 likes
5 replies
tykus's avatar

Perhaps absolute URLs?

<img class="thumbnail" src="/storage/app/public/album_covers" alt="{{$album->name}}">
mvd's avatar

Hi @iboosensei

<img class="thumbnail" src="storage/app/public/album_covers" alt="{{$album->name}}">

Is not a valid path for the image, there is no image filename. Try this

<img class="thumbnail" src="storage/app/public/album_covers/{{ $album->cover_image }}" alt="{{$album->name}}">
iboosensei's avatar

@MVD - It's still dosen't work. And when I type Name_app/storage/app/public/album_covers/Name_image, I get a 404 error.

munazzil's avatar

You can use as like below and check.

     <img class="thumbnail" src="{{asset('storage/app/public/album_covers')}}" alt="{{$album->name}}">

Please or to participate in this conversation.