4

I am having trouble displaying the images uploaded using spatie media library. I already looked in their documentation but I can't find a solution.

I had no issue uploading files (single file only).

The Database Media Table screenshot of Database Media Table

Controller @ store

public function store(Request $request)
{
    $categories = new ProductCategories();
    $categories->name         = $request->name;
    $categories->slug         = $request->slug;
    $categories->description  = $request->description;

    if($request->hasFile('photo') && $request->file('photo')->isValid()){
        $categories->addMediaFromRequest('photo')->toMediaCollection('category');
    }

    $categories->save();
    $request->session()->flash('message', 'Successfully created category');
    return redirect()->back();
}

Controller @ index

public function index()
{
    $lists = ProductCategories::all();
    return view('dashboard\product_category\categoryList', [ 'lists' => $lists ]);
}

config/filesystems.php

'disks' => [
    'local' => [
        'driver' => 'local',
        'root' => storage_path('app'),
    ],
    'public' => [
        'driver' => 'local',
        'root' => public_path('images/media'),
        'url' => env('APP_URL').'/images/media',
        'visibility' => 'public',
    ],
    's3' => [
        'driver' => 's3',
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION'),
        'bucket' => env('AWS_BUCKET'),
        'url' => env('AWS_URL'),
    ],
],

config/media-library.php

'disk_name' => env('MEDIA_DISK', 'public'),

These are my media folders:

wamp64/www/butingting/public/images/media/2
wamp64/www/butingting/public/images/media/3
wamp64/www/butingting/public/images/media/4

Blade page

 @foreach ($lists as $list)
     <tr>
          <td>
              <img src="{{$list->getFirstMediaUrl('category')}}" width="120px"><br/>
              {{$list->getFirstMediaUrl('category')}}
          </td>
     </tr>
 @endforeach

If I add {{$list->getFirstMediaUrl('category')}}, it looks like this:

enter image description here

I already done the "php artisan storage:link"

any suggestions?

Neuron
  • 5,141
  • 5
  • 38
  • 59
SleepWalker
  • 613
  • 1
  • 12
  • 39
  • url of your project homepage? – LulzAsh Sep 27 '21 at 15:19
  • Hi @LulzAsh it is only in my local server – SleepWalker Sep 27 '21 at 15:24
  • what is full url of your local server? can you try to open that image in new tab? – LulzAsh Sep 27 '21 at 15:25
  • here's my local path: C:\wamp64\www\butingting\public\images\media\2\cessto-2.jpg . In ENV file the APP_URL=https://localhost:8000 . and the getFirstMediaUrl value is https://localhost:8000/images/media/2/cessto-1.jpg. if i put this url, https://localhost:8000/images/media/2/cessto-1.jpg in my browser tab it says "this site can't be reached – SleepWalker Sep 27 '21 at 15:41
  • 1
    Is your localhost:8000 accessible after a yarn/npm/node command? If so, is the image accessible directly from the wamp domain (domain.local/images...)? What is the HTTP error from "localhost:8000/images/media/2/cessto-1.jpg"? 404? Timeout? – Mtxz Sep 28 '21 at 01:47
  • wat specific command to run? I am using NPM. and yes the image is accessible directly from the wamp. and the error is upon accessing ocalhost:8000/images/media/2/cessto-2.jpg is, "This site can’t be reached localhost unexpectedly closed the connection. Try: Checking the connection Checking the proxy and the firewall Running Windows Network Diagnostics ERR_CONNECTION_CLOSED" even though the file is existing in localServer\media\2\cessto-2.jpg – SleepWalker Sep 28 '21 at 07:46
  • Can you try accessing the image from localhost with HTTP and HTTPS to see if there's a difference? What about your website running on localhost:8000: is it a self-signed certificate that you clicked "I accept the risk" and the address bar lock is red? – Mtxz Sep 28 '21 at 11:19

1 Answers1

6

Thank you Lulzash and Mtxz for your time! I check and take a long stare at the env file :( specifically in APP_URL.

The Solution is:

Form APP_URL=localhost:8000 or APP_URL=https://localhost:8000

It should be APP_URL=http://localhost:8000

Thanks Mtxz because your question makes me decide to rethink about the APP_URL!

SleepWalker
  • 613
  • 1
  • 12
  • 39