#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

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

#Using in Scripts

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