---
title: Public Files
---

# Public Files

Public files refer to image resource files that are shared across multiple pages, such as `logo.png` and `banner.jpg`.

These files do not need to be bundled by the builder and can be placed directly in the `public/` directory.

## Directory Structure

The `public` directory is at the same level as the `src` directory and has the following structure:

```
public
└── images
    └── logo.png
src
  └── ...
```

## Using Public Files

When using public files, you can reference them using an absolute path starting with `/`. You do not need to include the `public` directory name.

### Using in Stylesheets

```css
.logo {
    background-image: url('/images/logo.png');
}
```

### Using in Scripts

```tsx
import { Image } from '@ray-js/ray';
import React from 'react';

export default function Page(props) {
  return <Image src={'/images/logo.png'} />;
};
```

## Difference from Compiled Files

| Public Files                                        | Compiled Files                                                            |
| --------------------------------------------------- | ------------------------------------------------------------------------- |
| Referenced using absolute paths starting with `public/` | Referenced using relative paths such as `../images/logo.png`. Imported in script files (`require` `import`) |
| Contents of `public/` directory are directly copied to `dist/tuya` directory | Compiled files are bundled and have hashed filenames in the `dist/tuya/assets` directory |
| Files not found do not affect the build process | Missing files will cause build errors |