How to load assets properly ?

Level 10

@updatebraindatabase Check the docs here for Laravel: https://preline.co/docs/frameworks-laravel.html

Per the preline docs, you shouldnt have to add anything to the vite config, nor do you need to add the script tag to the body. Vite should bundle preline up in the app.js file when you run build.

The docs state to modify the tailwind config file , then add an import for preline in app.js file in the resources/js directory

1 like

Level 1

Thanks for your response @colbyalbo

Indeed, I didn't pay attention to the section reserved for frameworks :( Now it works. Thanks for your help.

Another question, for displaying images in views, what is the best practice to follow? Currently, I place my images in resources/images and call them like this:

<img src="{{ Vite::asset('resources/images/image.png') }}" alt="">

Then in my app.js I have:

import.meta.glob(["../images/**"]);

It works this way, but I wanted to know if it's the best method.

I tryied this way but it does not work https://laravel.com/docs/11.x/vite#url-processing

Level 10

@updatingBrainDatabase I don't use Vite to manage images, i never had a reason to do that. I've always used the Storage and Filesystem in Laravel, and used a symlink to have them in my public directory, then i use asset('images/image.jpg') to get the urls. You can read up on it here: https://laravel.com/docs/11.x/filesystem#the-public-disk

1 like

Level 1

@colbyalbo

Wow, that's awesome! Thank you so much, I didn't know about that. So I created an images folder in storage/app and with the symlink I can call my images with

{{ asset('images/image.png') }}

And in my CSS, if I want to set an image as a background, should I use this :

background-image: url("../../storage/app/images/background.png");

or is there an easier way?

Level 10

@updatingBrainDatabase

You shouldn't do this:

background-image: url("../../storage/app/images/background.png");

It shouldn't work anyway because the directory you are referencing is above the public root, it should 404. Only reference assets from the public directory (which is the only one that should work anyway)

just doing this should work, the symlink is making the "images" directory available in the public directory.

background-image: url("images/background.png");

Level 1

@colbyalbo

On my setup, when I call the image using background-image: url("images/background.png");, it actually looks for it in /resources/css/images/background.png. It worked with url("../../storage/app/images/background.png") because my setup uses resources/css as the origin.

I must have a configuration issue. I'm using Herd for my local server. Any idea where the problem might be?

In my filesystem I have this :

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

In the public folder, I do have my images folder, which is linked to the images folder in storage/app.

This is my .env file :

APP_NAME="Test"
APP_ENV=local
APP_KEY=---
APP_DEBUG=true
APP_TIMEZONE=Europe/Paris
APP_URL=https://test.test

APP_LOCALE=fr
APP_FALLBACK_LOCALE=fr
APP_FAKER_LOCALE=fr_FR

APP_MAINTENANCE_DRIVER=file
APP_MAINTENANCE_STORE=database

IGNITION_EDITOR=vscode

BCRYPT_ROUNDS=12

LOG_CHANNEL=stack
LOG_STACK=single
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null

BROADCAST_CONNECTION=log
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database

CACHE_STORE=database
CACHE_PREFIX=

MEMCACHED_HOST=127.0.0.1

REDIS_CLIENT=phpredis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=log
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

VITE_APP_NAME="${APP_NAME}"

Level 1

@colbyalbo

By using background-image: url("/images/background.png");, it correctly looks for the image from the root (public) in images/background.png but doesn't find it even though the images folder is present with the image inside.