Filament•2y ago

brand logo not showing

Hello, I am trying to customize the branding of my filamentphp as according to the docs. My logo is in public/images/logo.png This is the image tag i'm using: <img src="{{ asset('/images/logo.png') }}" class="h-10"> I added the symbolic link via this command: php artisan storage:link But my logo is not showing on my page as the image can't be found

66 Replies

Dan Harrin•2y ago

show us what's in your /public directory

AbsoliumOP•2y ago

Sorry for being slow, I've been dealing with some family issues, but here it is

Dan Harrin•2y ago

So where is logo.png its not in the images directory

AbsoliumOP•2y ago

It's the sublime_car.png, I changed the name initially not to give away details of my client <img src="{{ asset('/images/sublime_car.png') }}" class="h-10"> Since I leaked it that's the exact line of code, I'll remove it later on

Dan Harrin•2y ago

can you show me the error in console then?

AbsoliumOP•2y ago

It's saying the file can't be found Here is my filesystems.php file

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default filesystem disk that should be used
    | by the framework. The "local" disk, as well as a variety of cloud
    | based disks are available to your application. Just store away!
    |
    */

    'default' => env('FILESYSTEM_DISK', 'local'),

    /*
    |--------------------------------------------------------------------------
    | Filesystem Disks
    |--------------------------------------------------------------------------
    |
    | Here you may configure as many filesystem "disks" as you wish, and you
    | may even configure multiple disks of the same driver. Defaults have
    | been set up for each driver as an example of the required values.
    |
    | Supported Drivers: "local", "ftp", "sftp", "s3"
    |
    */

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
            'throw' => false,
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL') . '/storage',
            'visibility' => 'public',
            'throw' => false,
        ],

        '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'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
            'throw' => false,
        ],

    ],

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default filesystem disk that should be used
    | by the framework. The "local" disk, as well as a variety of cloud
    | based disks are available to your application. Just store away!
    |
    */

    'default' => env('FILESYSTEM_DISK', 'local'),

    /*
    |--------------------------------------------------------------------------
    | Filesystem Disks
    |--------------------------------------------------------------------------
    |
    | Here you may configure as many filesystem "disks" as you wish, and you
    | may even configure multiple disks of the same driver. Defaults have
    | been set up for each driver as an example of the required values.
    |
    | Supported Drivers: "local", "ftp", "sftp", "s3"
    |
    */

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
            'throw' => false,
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL') . '/storage',
            'visibility' => 'public',
            'throw' => false,
        ],

        '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'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
            'throw' => false,
        ],

    ],

The rest of my filesystems.php file:

    /*
    |--------------------------------------------------------------------------
    | Symbolic Links
    |--------------------------------------------------------------------------
    |
    | Here you may configure the symbolic links that will be created when the
    | `storage:link` Artisan command is executed. The array keys should be
    | the locations of the links and the values should be their targets.
    |
    */

    'links' => [
        public_path('storage') => storage_path('app/public'),
    ],

];

    /*
    |--------------------------------------------------------------------------
    | Symbolic Links
    |--------------------------------------------------------------------------
    |
    | Here you may configure the symbolic links that will be created when the
    | `storage:link` Artisan command is executed. The array keys should be
    | the locations of the links and the values should be their targets.
    |
    */

    'links' => [
        public_path('storage') => storage_path('app/public'),
    ],

];

Dan Harrin•2y ago

is the URL for the file that is in the console error correct? is your APP_URL correct?

AbsoliumOP•2y ago

The app_url is correct as it points to my localhost But if i click on the URL for the file it doesn't find the image

Dan Harrin•2y ago

can you spot what is wrong with the url?

AbsoliumOP•2y ago

There must be a mismatch in my routing i think http://localhost:8000/images/sublime_car.png As this is the URL it generates, which to me it would appear as it looks in the wrong folder

Dan Harrin•2y ago

it looks like the right folder to me what should it be?

AbsoliumOP•2y ago

Hm It should be the public folder

Dan Harrin•2y ago

hm no the public directory is the root of the domain

AbsoliumOP•2y ago

Yes it is

Dan Harrin•2y ago

so whats the problem?

AbsoliumOP•2y ago

The logo isn't displaying on my page:

AbsoliumOP•2y ago

If i go to /public/images/sublime_car.png i have the same issue

Dan Harrin•2y ago

the URL looks right public should not be in the URL if your server is configured right i dont know what the problem is, sorry. this is a laravel issue, not filament

AbsoliumOP•2y ago

That's alright, thank you for trying to help Could you point me to some resources I could check out to resolve this issue?

Dan Harrin•2y ago

if i knew what the problem was, i would. sorry

AbsoliumOP•2y ago

That's alright thank you for your help

Vp•2y ago

<img src="/images/logo.png" class="h-10"> try like this, It's working for me and create a resources/views/vendor/filament/components/brand.blade.php file

AbsoliumOP•2y ago

Those are the steps i followed, but I’m running laravel in a docker with nginx and my problem should be there somewhere

LeandroFerreira•2y ago

what is the url of the app? Did you set the APP_URL in the .env file?

AbsoliumOP•2y ago

As I thought the problem was in my nginx.conf file. I managed to fix it by adding the public folder to the location in the conf file. But now I have this:

AbsoliumOP•2y ago

Is there a way to center the logo?

LeandroFerreira•2y ago

<div class="flex justify-center">
    <img ../>
</div>

<div class="flex justify-center">
    <img ../>
</div>

AbsoliumOP•2y ago

Thank you! In case there's other people here facing similar issues when using docker with nginx to run laravel, here's the solution that worked for me: Open your nginx.conf file and in there add these lines of code in your server block: location /images { alias /var/www/html/public/images; access_log off; expires max; } location /storage { alias /var/www/html/storage/app/public; access_log off; expires max; }

LeandroFerreira•2y ago

or use laravel sail 😅

AbsoliumOP•2y ago

What is laravel sail?

LeandroFerreira•2y ago

https://laravel.com/docs/10.x/sail#main-content

Laravel - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.

AbsoliumOP•2y ago

Is that like a prebuilt docker image for laravel?

LeandroFerreira•2y ago

Yes, a great starting point for building laravel apps

AbsoliumOP•2y ago

Is this also to use in production? As right now I have a docker image and just do docker-compose up -d and docker compose down to start/stop my applications. I'm also using a redis and mysql db and nginx server in these containers. So is there a lot of difference between these?

LeandroFerreira•2y ago

In my opinion, for a development environment

AbsoliumOP•2y ago

What should i do once i go to production?

LeandroFerreira•2y ago

deploy your app in your server 🤷‍♂️ you could install a new laravel instance and try sail...

AbsoliumOP•2y ago

Well yes, but now i use dockers to deploy everything. If i use the dockers from sail and these are for development env, what do i use when i still want to run it in a docker environment on prod? As dockers keep everything organized a bit nicer imo

LeandroFerreira•2y ago

I don't know devops, but google can help you

AbsoliumOP•2y ago

That's alright, thank you for the help

Dennis Koch•2y ago

Sounds like a hack to a bad server config. Is your server root pointing to /public

AbsoliumOP•2y ago

Yes This is my entire nginx.conf file server { listen 80; server_name localhost; root /var/www/public; index index.php index.html index.htm; location / { try_files $uri $uri/ /index.php?$query_string; } location ~ .php$ { fastcgi_split_path_info ^(.+.php)(/.+)$; fastcgi_pass cli:9000; fastcgi_index index.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; } location ~ /.ht { deny all; } location /images { alias /var/www/html/public/images; access_log off; expires max; } location /storage { alias /var/www/html/storage/app/public; access_log off; expires max; } } I appreciate all pointers to better practices, I’m not gonna lie there’s quite a few technologies I’m usingnow that I haven’t used before so sometimes troubleshooting is hard

Dennis Koch•2y ago

You shouldn’t need that. Did you symlink the storage folder? php artisan storage:link? Okay you did. Still weird.

AbsoliumOP•2y ago

Yeah I did follow the laravel documentation

awcodes•2y ago

Why is the root of your app www/public but your asserts are in www/html/public?

AbsoliumOP•2y ago

That's a good question, I changed it to /var/www/public and it doesn't work anymore

Dennis Koch•2y ago

But it should be /var/www/html/public, right?

AbsoliumOP•2y ago

I think so, but the strange thing is this:

AbsoliumOP•2y ago

This is when i open bash in my docker image everything seems to be in /var/www

Dennis Koch•2y ago

Then it's weird that the rest of that nginx config works

AbsoliumOP•2y ago

Yeah as my root states /var/www/public which is where my index is and my folder images But if i use /var/www/public/images in my conf it doesn't work, i need the html And if i change my root to /var/www/html/public my application stops working

Hasith•15mo ago

Do i need to manually create this folder? resources/views/vendor/filament/components/brand.blade.php file

Vp•15mo ago

Yes, ref this link https://filamentphp.com/docs/2.x/admin/appearance#changing-the-brand-logo

Appearance - Admin Panel - Filament

Hasith•15mo ago

I created the folder and added the Logo inside public/images/logo.png. but did not work