# Loading Images Based on DPI
- [Defining Resource Files](#en-us_topic_0000001059308530_section1412713919386)
- [Referencing Resources](#en-us_topic_0000001059308530_section123352511389)
An application developed based on the JS UI framework may be applied to different devices. Due to different DPIs of devices, different image resources may need to be configured. This framework allows devices with different DPIs to load different image resources. You only need to perform [Defining Resource Files](#en-us_topic_0000001059308530_section1412713919386) and [Referencing Resources](#en-us_topic_0000001059308530_section123352511389) to use this function.
## Defining Resource Files
In the **/resources** directory described in [File Organization](file-organization.md#EN-US_TOPIC_0000001115974720), you can define resource files for devices with different DPIs. JSON files are used to save resource definitions in the framework. For example, the resource file **res-ldpi.json** applies to a low-density \(ldpi\) screen \(-120 dpi\), and the resource file **res-xxhdpi.json** applies to an ultra-high-density \(xxhdpi\) screen \(-480 dpi\).
The reference density is 160 dpi, and the low density is 0.75 x 160 dpi. For details, see [Table 1](#en-us_topic_0000001059308530_table114361825185814).
**Table 1** Configuration qualifiers for different pixel densities
Extra high-density screen (~320 dpi) (2.0 x 160 dpi).
xxhdpi
Extra extra high-density screen (~480 dpi) (3.0 x 160 dpi)
xxxhdpi
Extra extra extra high-density screen (~640 dpi) (4.0 x 160 dpi)
The format of the resource file content is as follows:
```
{
"image": {
"wearable": "common/wearable.png",
"computer": "image/computer.jpg"
}
}
```
## Referencing Resources
You can use the **$r** syntax in **.hml** and **.js** files to format image resources and obtain different image resources for different DPI devices.
**Table 2** Resource formatting
Attribute
Type
Parameter
Description
$r
Function
Path: string, representation of the resource file path
Replaces the resource path based on the DPI of the current device: this.$r('image.wearable')
> **NOTE:**
>If the DPI of the device does not completely match any DPI defined in [Table 1](#en-us_topic_0000001059308530_table114361825185814), a resource file closer to the DPI of the device is selected. For example, if the current device density is 2.7 x 160 dpi, resources defined in **res-xxhdpi.json** are selected. You can define a **res-defaults.json** file that will be selected by your application if required resource strings do not exist in **res-xxhdpi.json**. If the required resource strings are still not found in **res-defaults.json**, the image fails to be loaded.
- Sample code for resource formatting
```
```
```
// xxx.js
// The following example shows how to use $r in a .js file.
export default {
private: {
computer: '',
},
onInit() {
// Format resources.
this.computer = this.$r('image.computer');
},
}
```