1# Loading Images Based on DPI<a name="EN-US_TOPIC_0000001162414607"></a> 2 3- [Defining Resource Files](#en-us_topic_0000001059308530_section1412713919386) 4- [Referencing Resources](#en-us_topic_0000001059308530_section123352511389) 5 6An 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. 7 8## Defining Resource Files<a name="en-us_topic_0000001059308530_section1412713919386"></a> 9 10In 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\). 11 12The 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). 13 14**Table 1** Configuration qualifiers for different pixel densities 15 16<a name="en-us_topic_0000001059308530_table114361825185814"></a> 17<table><thead align="left"><tr id="en-us_topic_0000001059308530_row1143610257585"><th class="cellrowborder" valign="top" width="23.1%" id="mcps1.2.3.1.1"><p id="en-us_topic_0000001059308530_p11436202514580"><a name="en-us_topic_0000001059308530_p11436202514580"></a><a name="en-us_topic_0000001059308530_p11436202514580"></a>Density Qualifier</p> 18</th> 19<th class="cellrowborder" valign="top" width="76.9%" id="mcps1.2.3.1.2"><p id="en-us_topic_0000001059308530_p1143612252586"><a name="en-us_topic_0000001059308530_p1143612252586"></a><a name="en-us_topic_0000001059308530_p1143612252586"></a>Description</p> 20</th> 21</tr> 22</thead> 23<tbody><tr id="en-us_topic_0000001059308530_row2043612251587"><td class="cellrowborder" valign="top" width="23.1%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001059308530_p34361025125819"><a name="en-us_topic_0000001059308530_p34361025125819"></a><a name="en-us_topic_0000001059308530_p34361025125819"></a>ldpi</p> 24</td> 25<td class="cellrowborder" valign="top" width="76.9%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001059308530_p17436112516581"><a name="en-us_topic_0000001059308530_p17436112516581"></a><a name="en-us_topic_0000001059308530_p17436112516581"></a>Low-density screen (~120 dpi) (0.75 x 160 dpi)</p> 26</td> 27</tr> 28<tr id="en-us_topic_0000001059308530_row1436625145814"><td class="cellrowborder" valign="top" width="23.1%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001059308530_p1436152545811"><a name="en-us_topic_0000001059308530_p1436152545811"></a><a name="en-us_topic_0000001059308530_p1436152545811"></a>mdpi</p> 29</td> 30<td class="cellrowborder" valign="top" width="76.9%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001059308530_p18436102516585"><a name="en-us_topic_0000001059308530_p18436102516585"></a><a name="en-us_topic_0000001059308530_p18436102516585"></a>Medium-density screen (~160 dpi) (reference density)</p> 31</td> 32</tr> 33<tr id="en-us_topic_0000001059308530_row5436025105811"><td class="cellrowborder" valign="top" width="23.1%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001059308530_p134361125115816"><a name="en-us_topic_0000001059308530_p134361125115816"></a><a name="en-us_topic_0000001059308530_p134361125115816"></a>hdpi</p> 34</td> 35<td class="cellrowborder" valign="top" width="76.9%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001059308530_p6436132514585"><a name="en-us_topic_0000001059308530_p6436132514585"></a><a name="en-us_topic_0000001059308530_p6436132514585"></a>High-density screen (~240 dpi) (1.5 x 160 dpi)</p> 36</td> 37</tr> 38<tr id="en-us_topic_0000001059308530_row1543692565815"><td class="cellrowborder" valign="top" width="23.1%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001059308530_p84361625205810"><a name="en-us_topic_0000001059308530_p84361625205810"></a><a name="en-us_topic_0000001059308530_p84361625205810"></a>xhdpi</p> 39</td> 40<td class="cellrowborder" valign="top" width="76.9%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001059308530_p94361925185813"><a name="en-us_topic_0000001059308530_p94361925185813"></a><a name="en-us_topic_0000001059308530_p94361925185813"></a>Extra high-density screen (~320 dpi) (2.0 x 160 dpi).</p> 41</td> 42</tr> 43<tr id="en-us_topic_0000001059308530_row17436132515589"><td class="cellrowborder" valign="top" width="23.1%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001059308530_p144364251583"><a name="en-us_topic_0000001059308530_p144364251583"></a><a name="en-us_topic_0000001059308530_p144364251583"></a>xxhdpi</p> 44</td> 45<td class="cellrowborder" valign="top" width="76.9%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001059308530_p17436025115810"><a name="en-us_topic_0000001059308530_p17436025115810"></a><a name="en-us_topic_0000001059308530_p17436025115810"></a>Extra extra high-density screen (~480 dpi) (3.0 x 160 dpi)</p> 46</td> 47</tr> 48<tr id="en-us_topic_0000001059308530_row1543632565813"><td class="cellrowborder" valign="top" width="23.1%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001059308530_p124371254586"><a name="en-us_topic_0000001059308530_p124371254586"></a><a name="en-us_topic_0000001059308530_p124371254586"></a>xxxhdpi</p> 49</td> 50<td class="cellrowborder" valign="top" width="76.9%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001059308530_p14437182535819"><a name="en-us_topic_0000001059308530_p14437182535819"></a><a name="en-us_topic_0000001059308530_p14437182535819"></a>Extra extra extra high-density screen (~640 dpi) (4.0 x 160 dpi)</p> 51</td> 52</tr> 53</tbody> 54</table> 55 56The format of the resource file content is as follows: 57 58``` 59{ 60 "image": { 61 "wearable": "common/wearable.png", 62 "computer": "image/computer.jpg" 63 } 64} 65``` 66 67## Referencing Resources<a name="en-us_topic_0000001059308530_section123352511389"></a> 68 69You can use the **$r** syntax in **.hml** and **.js** files to format image resources and obtain different image resources for different DPI devices. 70 71**Table 2** Resource formatting 72 73<a name="en-us_topic_0000001059308530_table155672264241"></a> 74<table><thead align="left"><tr id="en-us_topic_0000001059308530_row205671726192419"><th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.1"><p id="en-us_topic_0000001059308530_p7567626172419"><a name="en-us_topic_0000001059308530_p7567626172419"></a><a name="en-us_topic_0000001059308530_p7567626172419"></a>Attribute</p> 75</th> 76<th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.2"><p id="en-us_topic_0000001059308530_p65670263242"><a name="en-us_topic_0000001059308530_p65670263242"></a><a name="en-us_topic_0000001059308530_p65670263242"></a>Type</p> 77</th> 78<th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.3"><p id="en-us_topic_0000001059308530_p15567162619248"><a name="en-us_topic_0000001059308530_p15567162619248"></a><a name="en-us_topic_0000001059308530_p15567162619248"></a>Parameter</p> 79</th> 80<th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.4"><p id="en-us_topic_0000001059308530_p5567026112416"><a name="en-us_topic_0000001059308530_p5567026112416"></a><a name="en-us_topic_0000001059308530_p5567026112416"></a>Description</p> 81</th> 82</tr> 83</thead> 84<tbody><tr id="en-us_topic_0000001059308530_row556702632419"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.1 "><p id="en-us_topic_0000001059308530_p13567526122410"><a name="en-us_topic_0000001059308530_p13567526122410"></a><a name="en-us_topic_0000001059308530_p13567526122410"></a>$r</p> 85</td> 86<td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.2 "><p id="en-us_topic_0000001059308530_p1567102615246"><a name="en-us_topic_0000001059308530_p1567102615246"></a><a name="en-us_topic_0000001059308530_p1567102615246"></a>Function</p> 87</td> 88<td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.3 "><p id="en-us_topic_0000001059308530_p5912182294910"><a name="en-us_topic_0000001059308530_p5912182294910"></a><a name="en-us_topic_0000001059308530_p5912182294910"></a>Path: string, representation of the resource file path</p> 89</td> 90<td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.4 "><p id="en-us_topic_0000001059308530_p85672026192415"><a name="en-us_topic_0000001059308530_p85672026192415"></a><a name="en-us_topic_0000001059308530_p85672026192415"></a>Replaces the resource path based on the DPI of the current device: <strong id="en-us_topic_0000001059308530_b1520314243578"><a name="en-us_topic_0000001059308530_b1520314243578"></a><a name="en-us_topic_0000001059308530_b1520314243578"></a>this.$r('image.wearable')</strong></p> 91</td> 92</tr> 93</tbody> 94</table> 95 96> **NOTE:** 97>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. 98 99- Sample code for resource formatting 100 101 ``` 102 <!-- xxx.hml --> 103 <div> 104 <!-- Use $r to set the path of the image resource in the JSON file. --> 105 <image src="{{ $r('image.wearable') }}" class="image"></image> 106 <image src="{{ computer }}" class="image"></image> 107 </div> 108 ``` 109 110 ``` 111 // xxx.js 112 // The following example shows how to use $r in a .js file. 113 export default { 114 private: { 115 computer: '', 116 }, 117 onInit() { 118 // Format resources. 119 this.computer = this.$r('image.computer'); 120 }, 121 } 122 ``` 123 124 125
