1# File Organization
2
3
4## Directory Structure
5
6The 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.
7
8  **Figure 1** Directory structure
9
10![en-us_image_0000001431388581](figures/en-us_image_0000001431388581.png)
11
12Functions of the files are as follows:
13
14- **.hml** files describe the page layout.
15
16- **.css** files describe the page style.
17
18- **.js** files process the interactions between pages and users.
19
20Functions of the folders are as follows:
21
22- The **app.js** file manages global JS logics and application lifecycle.
23- The **pages** directory stores all component pages.
24- The **common** directory stores public resource files, such as media resources and **.js** files.
25- The **i18n** folder stores resources in different languages, for example, UI strings and image paths.
26
27>  **NOTE**
28>
29>  - The **i18n** folder is a reserved one and cannot be renamed.
30>
31>
32>  - The folders marked as optional in the directory structure can be created as needed after you create the project in DevEco Studio.
33
34
35## File Access Rules
36
37Application resources can be accessed via an absolute or relative path. In this development framework, an absolute path starts with a slash (/), and a relative path starts with **./** or **../**. The rules are as follows:
38
39- To reference a code file, use a relative path, for example, **../common/utils.js**.
40
41- To reference a resource file, use an absolute path, for example: **/common/xxx.png**.
42
43- Store code files and resource files in the **common** directory and access the files in a required fashion.
44
45- In a **.css** file, use the **url()** function to create a URL, for example, **url(/common/xxx.png)**.
46
47>  **NOTE**
48>
49>  When code file A needs to reference code file B:
50>
51>  - 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.
52>
53>  - 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.
54>
55
56
57## Media File Formats
58
59  **Table 1** Supported image formats
60
61| Format  | Supported Version                    | File Name Extension|
62| ---- | ------------------------ | ------- |
63| BMP  | API version 4+ | .bmp    |
64| JPEG | API version 4+ | .jpg    |
65| PNG  | API version 4+ | .png    |
66
67## Storage Directory
68
69Since API version 5, the [\<image>](js-lite-components-basic-image.md) component supports access to images in the private directory of an application.
70
71| Directory Type  | Prefix           | Access Visibility | Description                         |
72| ------ | --------------- | ------ | --------------------------- |
73| Private directory of the application| internal://app/ | Current application only| The directory is deleted when the application is uninstalled. Access to the parent directory using **../** is prohibited.|
74