# File Organization
- [Directory Structure](#en-us_topic_0000001058830797_section119431650182015)
- [File Access Rules](#en-us_topic_0000001058830797_section6620355202117)
- [Media File Formats](#en-us_topic_0000001058830797_section79731562617)
## Directory Structure
The following figure shows the typical directory structure of the JavaScript module \(**entry/src/main/js/module**\) for an application with feature abilities \(FA\) using JavaScript APIs.
**Figure 1** Directory structure
.png)
**Figure 2** Directory structure for resource sharing 5+
Functions of the files are as follows:
- **.hml** files describe the page layout.
- **.css** files describe the page style.
- **.js** files process the interactions between pages and users.
Functions of the folders are as follows:
- The **app.js** file manages global JavaScript logics and application lifecycle.
- The **pages** directory stores all component pages.
- The **common** directory stores public resource files, such as media resources, custom components, and **.js** files.
- The **resources** directory stores resource configuration files, covering global styles and multi-resolution loading.
- The **share** directory is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by **default1** and **default2** instances.
> **NOTE:**
>- The following reserved folders cannot be renamed:
> - share
> - resources
>- If the same resource name and directory are used under the **share** directory and the instance \(**default**\) directory, the resource in the instance directory will be used when you reference the directory.
## File Access Rules
Application resources can be accessed via an absolute or relative path. In the JS UI framework, an absolute path starts with a slash \(/\), and a relative path starts with **./** or **../**. The rules are as follows:
- To reference a code file, use a relative path, for example, **../common/utils.js**.
- To reference a resource file, use an absolute path, for example, **/common/xxx.png**.
- Store code files and resource files in the **common** directory and access the files in a required fashion.
- In a **.css** file, use the **url\(\)** function to create a URL, for example, **url\(/common/xxx.png\)**.
> **NOTE:**
>When code file A needs to reference code file B:
>- If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
>- If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files because the directory of code file B changes during Webpack packaging.
>Use an absolute path if you want to dynamically change the resource file path through data binding in a **.js** file.
## Media File Formats
**Table 1** Supported image formats
Image Format
|
API Version
|
File Format
|
|---|
BMP
|
API Version 3+
|
.bmp
|
GIF
|
API Version 3+
|
.gif
|
JPEG
|
API Version 3+
|
.jpg
|
PNG
|
API Version 3+
|
.png
|
WebP
|
API Version 3+
|
.webp
|