CSS File Loading Issues

1

Hi, odan.

Given that function with my diectory structure like this

myapp

-public
--.htaccess
--index.php

-resources
--assets
---css
----style.css

--views

So in my html page

<link href="{{ base_path() }}/resources/assets/css/style.css">

But, eventhough the path is correct, it still 404 in console and not loaded on page.

I did just as documentation to create .htaccess on root folder(myapp) and in public as well.

Should I create route for css/js file?

2

Based on your directory structure, it appears that your CSS file is located inside the resources/assets/css directory. The public directory is usually the one that’s directly accessible via the web server. To make your CSS file accessible, you need to ensure that it is served from the public directory.

So try to move your resources/assets/css directory to the public directory. Your directory structure should look like this:

  • .htaccess
  • public
    • .htaccess
    • index.php
    • css
      • style.css

In your HTML template, you can now link to the CSS file without using base_path() , as it will be served from the root of your web server.

<link rel="stylesheet" href="/css/style.css">

It’s essential to ensure that your web server is configured to allow serving static files from the public directory. So make sure the webservers DocumentRoot points to the public/ directory.

3

If its public then public have access to it right?

Well, its okay for css/js file, what about image file like user’s image, question’s image etc.

4

This also applies to images if you want to display/load them on your website or in your web application.

Of course, there are exceptions, e.g. if these images are only accessible to a specific user with specific permissions. Then you may need a more specific solution that loads the images from an endpoint.

5

I’m not sure I get the part specific permission, is it like middleware or something else? Could you provide some pseudo example? I just want to forbid access to image but allow if its just css/js files

6

Assets like CSS, JS, and images are typically handled at the web server level for performance reasons, rather than within your (Slim) application code. This means you just put this files directly in a subdirectory of the public/ directory, e.g. public/css/styles.css, public/js/app.js, public/images/cat.png and so on.

If you just want to deny access to image files while allowing access to CSS and JavaScript files, you could also use an Apache public/.htaccess file:

# Disable directory browsing
Options -Indexes

# Deny access to image files (e.g., jpg, png, gif)
<FilesMatch "\.(jpg|jpeg|png|gif)$">
    Order Allow,Deny
    Deny from all
</FilesMatch>

# Redirect to front controller
RewriteEngine On
# RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

For Nginx, you can achieve a similar configuration using the location directive in your Nginx server block configuration.

Could you provide some pseudo example?

Without more context, it’s not possible to provide even a pseudo example.

7 
# Deny access to image files (e.g., jpg, png, gif)
<FilesMatch "\.(jpg|jpeg|png|gif)$">
    Order Allow,Deny
    Deny from all
</FilesMatch>

This is what I’m looking for. Thankyou very much

1 Like