How to Fix Missing Assets After Removing ‘Public’ from Laravel 11 URLs

How to Fix Missing Assets After Removing 'Public' from Laravel 11 URLs
If CSS images or other assets (like fonts, JS, etc.) are not loading after removing /public
from the Laravel 11 URL, follow these steps to fix the issue:
✅ Why is this happening?
Laravel expects assets (like images) to be located in the /public
folder. After removing /public
from the URL, the paths to these assets might become incorrect.
✅ Solution 1: Use the asset()
Helper in Blade Files
Ensure that all your image and CSS paths in Blade views use the asset()
helper.
Example:
<img src="{{ asset('images/logo.png') }}" alt="Logo">
For CSS:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
If you are using background images in inline CSS, use the following:
<div style="background-image: url('{{ asset('images/background.jpg') }}');">
✅ Solution 2: Update Image Paths in CSS Files
If your images are referenced in your CSS, update their paths.
Change:
background: url('/images/background.jpg');
To:
background: url('../images/background.jpg');
Or, if the images are in /public
, use the absolute path:
background: url('/public/images/background.jpg');
If you are using Vite in Laravel 11, update asset paths using @vite
:
background: url('/images/background.jpg');
✅ Solution 3: Ensure .htaccess
is Configured Properly
Check that you have the correct .htaccess
in the root of your Laravel project.
Here is the correct configuration:
<IfModule mod_rewrite.c>
RewriteEngine On
# Redirect requests to public/index.php
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ public/index.php/$1 [L]
</IfModule>
✅ Solution 4: Adjust Vite Configuration (If Using Vite)
If your CSS is compiled using Vite (default in Laravel 11), ensure the base path is set correctly.
Check your vite.config.js file:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
base: '/', // Ensure this is correct
});
Rebuild assets:
npm run build
✅ Solution 5: Ensure Apache is Set Correctly
If using Apache, check that it allows .htaccess
overrides.
Open the configuration:
sudo nano /etc/apache2/sites-available/000-default.conf
Ensure this section is present:
<Directory /var/www/html/your-laravel-app>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
Restart Apache:
sudo systemctl restart apache2
✅ Solution 6: Clear Cache
Ensure that cached views and routes are cleared:
php artisan cache:clear
php artisan config:cache
php artisan route:cache
php artisan view:cache
✅ Solution 7: Test the Application
- Ensure your image loads via:
http://your-domain.com/images/logo.png
- Check the CSS file by visiting:
http://your-domain.com/css/app.css
✅ Final Check
Ensure your images are in the correct location:
- Public images should be in
/public/images
- CSS should reference these correctly using
asset()
or relative paths.
Would you like more help with Nginx, Vite, or other issues? 😊