# CSS File Loading Issues

**URL:** <https://discourse.slimframework.com/t/css-file-loading-issues/5748>\
**Category:** Questions\
**Created:** [November 14, 2023, 1:06am UTC](https://discourse.slimframework.com/t/css-file-loading-issues/5748 "2023-11-14T01:06:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ghabriel](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@ghabriel](https://discourse.slimframework.com/u/ghabriel)\
**Post date:** [November 14, 2023, 1:06am UTC](https://discourse.slimframework.com/t/css-file-loading-issues/5748/1 "2023-11-14T01:06:51Z")

</div>

Hi, odan.

Given that function with my diectory structure like this

```auto
myapp

-public
--.htaccess
--index.php

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

--views

```

So in my html page

```auto
<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?

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [November 14, 2023, 6:25pm UTC](https://discourse.slimframework.com/t/css-file-loading-issues/5748/2 "2023-11-14T18:25:19Z")

</div>

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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![ghabriel](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@ghabriel](https://discourse.slimframework.com/u/ghabriel)\
**Post date:** [November 15, 2023, 11:36am UTC](https://discourse.slimframework.com/t/css-file-loading-issues/5748/3 "2023-11-15T11:36:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [November 15, 2023, 1:42pm UTC](https://discourse.slimframework.com/t/css-file-loading-issues/5748/4 "2023-11-15T13:42:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ghabriel](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@ghabriel](https://discourse.slimframework.com/u/ghabriel)\
**Post date:** [November 16, 2023, 1:49am UTC](https://discourse.slimframework.com/t/css-file-loading-issues/5748/5 "2023-11-16T01:49:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [November 16, 2023, 8:10am UTC](https://discourse.slimframework.com/t/css-file-loading-issues/5748/6 "2023-11-16T08:10:14Z")

</div>

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:

```auto
# 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.

---

<div class="post-metadata">

**Author:** ![ghabriel](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@ghabriel](https://discourse.slimframework.com/u/ghabriel)\
**Post date:** [November 18, 2023, 3:42pm UTC](https://discourse.slimframework.com/t/css-file-loading-issues/5748/7 "2023-11-18T15:42:34Z")

</div>

```auto
# 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