| <!DOCTYPE html> |
| <html lang="en-US"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title><image> | WEEX</title> |
| <meta name="description" content="Weex"> |
| <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png"> |
| <script src="//g.alicdn.com/alilog/mlog/aplus_v2.js"></script> |
| <meta name="data-spm" dataSpmProtocol="i" content="a2c7j"> |
| <meta name="aplus-ajax" content="chksum"> |
| <meta name="aplus-waiting" content="MAN"> |
| <meta name="google-site-verification" content="FbH8DPHpxdDJlfkKLKXuXWOu69DI8ZRRP8O2Phg8UKw"> |
| <meta name="baidu-site-verification" content="WRr1iWvsYK"> |
| |
| <link rel="preload" href="/assets/css/styles.0ff943f0.css" as="style"><link rel="preload" href="/assets/js/app.0ff943f0.js" as="script"><link rel="preload" href="/assets/js/26.8905d6a0.js" as="script"><link rel="prefetch" href="/assets/css/1.styles.aa72e838.css"><link rel="prefetch" href="/assets/css/10.styles.1fff5b86.css"><link rel="prefetch" href="/assets/css/11.styles.a03faa50.css"><link rel="prefetch" href="/assets/css/2.styles.fc5d9892.css"><link rel="prefetch" href="/assets/css/21.styles.9ebad2b1.css"><link rel="prefetch" href="/assets/css/3.styles.6b94323a.css"><link rel="prefetch" href="/assets/css/36.styles.6dbb9d8c.css"><link rel="prefetch" href="/assets/css/4.styles.706a5607.css"><link rel="prefetch" href="/assets/css/7.styles.469d3b64.css"><link rel="prefetch" href="/assets/css/8.styles.b36167bf.css"><link rel="prefetch" href="/assets/css/9.styles.5bed6ebe.css"><link rel="prefetch" href="/assets/js/10.1fff5b86.js"><link rel="prefetch" href="/assets/js/100.09076a87.js"><link rel="prefetch" href="/assets/js/101.71fa3538.js"><link rel="prefetch" href="/assets/js/102.8a9926d6.js"><link rel="prefetch" href="/assets/js/103.d6c3649e.js"><link rel="prefetch" href="/assets/js/104.adb2425b.js"><link rel="prefetch" href="/assets/js/105.a063ca34.js"><link rel="prefetch" href="/assets/js/106.620e227f.js"><link rel="prefetch" href="/assets/js/107.1c97d156.js"><link rel="prefetch" href="/assets/js/108.d1f236a9.js"><link rel="prefetch" href="/assets/js/109.10a909cc.js"><link rel="prefetch" href="/assets/js/11.a03faa50.js"><link rel="prefetch" href="/assets/js/110.6f9200c8.js"><link rel="prefetch" href="/assets/js/111.9c1831b3.js"><link rel="prefetch" href="/assets/js/112.e5c0d546.js"><link rel="prefetch" href="/assets/js/113.b1c17feb.js"><link rel="prefetch" href="/assets/js/114.c24b95ed.js"><link rel="prefetch" href="/assets/js/115.d7e38c3b.js"><link rel="prefetch" href="/assets/js/116.1aaa95ab.js"><link rel="prefetch" href="/assets/js/117.1a9e5539.js"><link rel="prefetch" href="/assets/js/118.8d915477.js"><link rel="prefetch" href="/assets/js/119.77f0a126.js"><link rel="prefetch" href="/assets/js/12.16a9b730.js"><link rel="prefetch" href="/assets/js/120.3cf0ba10.js"><link rel="prefetch" href="/assets/js/121.47fefbf1.js"><link rel="prefetch" href="/assets/js/122.3dd022e8.js"><link rel="prefetch" href="/assets/js/123.84abc63f.js"><link rel="prefetch" href="/assets/js/124.2568e233.js"><link rel="prefetch" href="/assets/js/125.5b665f24.js"><link rel="prefetch" href="/assets/js/126.25b58a0a.js"><link rel="prefetch" href="/assets/js/127.d62a58c6.js"><link rel="prefetch" href="/assets/js/128.e5774a02.js"><link rel="prefetch" href="/assets/js/129.9a813c06.js"><link rel="prefetch" href="/assets/js/13.f8bde866.js"><link rel="prefetch" href="/assets/js/130.edddc316.js"><link rel="prefetch" href="/assets/js/131.760aa65c.js"><link rel="prefetch" href="/assets/js/132.559d5ba7.js"><link rel="prefetch" href="/assets/js/133.cbdd35c7.js"><link rel="prefetch" href="/assets/js/134.c02d92e1.js"><link rel="prefetch" href="/assets/js/135.e6d5496a.js"><link rel="prefetch" href="/assets/js/136.8826af60.js"><link rel="prefetch" href="/assets/js/137.28b4573d.js"><link rel="prefetch" href="/assets/js/138.d370fc15.js"><link rel="prefetch" href="/assets/js/139.8d9150fc.js"><link rel="prefetch" href="/assets/js/14.a98602cc.js"><link rel="prefetch" href="/assets/js/140.f0a9b5e1.js"><link rel="prefetch" href="/assets/js/141.297fa6fe.js"><link rel="prefetch" href="/assets/js/142.82bbcbaa.js"><link rel="prefetch" href="/assets/js/143.2d1ed3b2.js"><link rel="prefetch" href="/assets/js/144.69a9bc6a.js"><link rel="prefetch" href="/assets/js/145.74d52c12.js"><link rel="prefetch" href="/assets/js/146.12ecdaf4.js"><link rel="prefetch" href="/assets/js/147.daad4b96.js"><link rel="prefetch" href="/assets/js/148.bb356182.js"><link rel="prefetch" href="/assets/js/149.56fdaace.js"><link rel="prefetch" href="/assets/js/15.ea6e5024.js"><link rel="prefetch" href="/assets/js/150.ee9c4994.js"><link rel="prefetch" href="/assets/js/151.2feae618.js"><link rel="prefetch" href="/assets/js/152.c7703521.js"><link rel="prefetch" href="/assets/js/153.3b555eab.js"><link rel="prefetch" href="/assets/js/154.c6329253.js"><link rel="prefetch" href="/assets/js/155.334c4ea4.js"><link rel="prefetch" href="/assets/js/156.1a29657f.js"><link rel="prefetch" href="/assets/js/157.ba8f07bc.js"><link rel="prefetch" href="/assets/js/158.a60a60ba.js"><link rel="prefetch" href="/assets/js/159.9ce96d49.js"><link rel="prefetch" href="/assets/js/16.14acc638.js"><link rel="prefetch" href="/assets/js/160.2a970224.js"><link rel="prefetch" href="/assets/js/161.a26e2b53.js"><link rel="prefetch" href="/assets/js/162.73535662.js"><link rel="prefetch" href="/assets/js/163.7518a0a5.js"><link rel="prefetch" href="/assets/js/164.17367778.js"><link rel="prefetch" href="/assets/js/165.46c8f055.js"><link rel="prefetch" href="/assets/js/166.1cc22037.js"><link rel="prefetch" href="/assets/js/167.3fbcb5c6.js"><link rel="prefetch" href="/assets/js/168.a3f80f1e.js"><link rel="prefetch" href="/assets/js/169.a6565c29.js"><link rel="prefetch" href="/assets/js/17.d6f2f3b8.js"><link rel="prefetch" href="/assets/js/170.566ddeda.js"><link rel="prefetch" href="/assets/js/171.4fd97bee.js"><link rel="prefetch" href="/assets/js/172.5295c6b9.js"><link rel="prefetch" href="/assets/js/173.ff25fd05.js"><link rel="prefetch" href="/assets/js/174.22ea6a1b.js"><link rel="prefetch" href="/assets/js/175.c6a04367.js"><link rel="prefetch" href="/assets/js/176.d3810924.js"><link rel="prefetch" href="/assets/js/177.facd2802.js"><link rel="prefetch" href="/assets/js/178.f4c6fbe9.js"><link rel="prefetch" href="/assets/js/179.1a3a2c12.js"><link rel="prefetch" href="/assets/js/18.83f6b39a.js"><link rel="prefetch" href="/assets/js/180.b54c8e90.js"><link rel="prefetch" href="/assets/js/181.88495b4c.js"><link rel="prefetch" href="/assets/js/182.8341d23c.js"><link rel="prefetch" href="/assets/js/183.332bcfe2.js"><link rel="prefetch" href="/assets/js/184.d8996a56.js"><link rel="prefetch" href="/assets/js/185.b8584f07.js"><link rel="prefetch" href="/assets/js/186.fa89e23f.js"><link rel="prefetch" href="/assets/js/187.90340eeb.js"><link rel="prefetch" href="/assets/js/188.efe631f8.js"><link rel="prefetch" href="/assets/js/189.72897b1a.js"><link rel="prefetch" href="/assets/js/19.94f071c0.js"><link rel="prefetch" href="/assets/js/190.1ec691ee.js"><link rel="prefetch" href="/assets/js/2.fc5d9892.js"><link rel="prefetch" href="/assets/js/20.13f7bbff.js"><link rel="prefetch" href="/assets/js/21.9ebad2b1.js"><link rel="prefetch" href="/assets/js/22.764b643d.js"><link rel="prefetch" href="/assets/js/23.f533737e.js"><link rel="prefetch" href="/assets/js/24.4eaa533c.js"><link rel="prefetch" href="/assets/js/25.e9877e57.js"><link rel="prefetch" href="/assets/js/27.b199a955.js"><link rel="prefetch" href="/assets/js/28.524af0cf.js"><link rel="prefetch" href="/assets/js/29.b772949f.js"><link rel="prefetch" href="/assets/js/3.6b94323a.js"><link rel="prefetch" href="/assets/js/30.f5bcac64.js"><link rel="prefetch" href="/assets/js/31.c55e03aa.js"><link rel="prefetch" href="/assets/js/32.e575600a.js"><link rel="prefetch" href="/assets/js/33.3fff5656.js"><link rel="prefetch" href="/assets/js/34.82598567.js"><link rel="prefetch" href="/assets/js/35.8e1290ba.js"><link rel="prefetch" href="/assets/js/36.6dbb9d8c.js"><link rel="prefetch" href="/assets/js/37.d27fdc88.js"><link rel="prefetch" href="/assets/js/38.f8fc7b20.js"><link rel="prefetch" href="/assets/js/39.bf967d40.js"><link rel="prefetch" href="/assets/js/4.706a5607.js"><link rel="prefetch" href="/assets/js/40.e1864fd6.js"><link rel="prefetch" href="/assets/js/41.61bd3b64.js"><link rel="prefetch" href="/assets/js/42.34d8d61d.js"><link rel="prefetch" href="/assets/js/43.1aee493f.js"><link rel="prefetch" href="/assets/js/44.22177e9b.js"><link rel="prefetch" href="/assets/js/45.5c743d2f.js"><link rel="prefetch" href="/assets/js/46.4feffac9.js"><link rel="prefetch" href="/assets/js/47.367f9103.js"><link rel="prefetch" href="/assets/js/48.0c246d45.js"><link rel="prefetch" href="/assets/js/49.ee354be9.js"><link rel="prefetch" href="/assets/js/5.7d9779f7.js"><link rel="prefetch" href="/assets/js/50.bd81c7f0.js"><link rel="prefetch" href="/assets/js/51.a5f432dd.js"><link rel="prefetch" href="/assets/js/52.537aded4.js"><link rel="prefetch" href="/assets/js/53.84814584.js"><link rel="prefetch" href="/assets/js/54.5f780e97.js"><link rel="prefetch" href="/assets/js/55.9d44c91d.js"><link rel="prefetch" href="/assets/js/56.fc164b43.js"><link rel="prefetch" href="/assets/js/57.959b2d44.js"><link rel="prefetch" href="/assets/js/58.bd5c38e0.js"><link rel="prefetch" href="/assets/js/59.3eaece52.js"><link rel="prefetch" href="/assets/js/6.49a49457.js"><link rel="prefetch" href="/assets/js/60.4b8cb735.js"><link rel="prefetch" href="/assets/js/61.b54b9195.js"><link rel="prefetch" href="/assets/js/62.0116614c.js"><link rel="prefetch" href="/assets/js/63.85b1247d.js"><link rel="prefetch" href="/assets/js/64.8f1be6b5.js"><link rel="prefetch" href="/assets/js/65.6a241647.js"><link rel="prefetch" href="/assets/js/66.08c8bd13.js"><link rel="prefetch" href="/assets/js/67.002e0071.js"><link rel="prefetch" href="/assets/js/68.6c6a7c94.js"><link rel="prefetch" href="/assets/js/69.64d90e5d.js"><link rel="prefetch" href="/assets/js/7.469d3b64.js"><link rel="prefetch" href="/assets/js/70.b2c287c9.js"><link rel="prefetch" href="/assets/js/71.b7ad1135.js"><link rel="prefetch" href="/assets/js/72.7391b5c2.js"><link rel="prefetch" href="/assets/js/73.c5c77d81.js"><link rel="prefetch" href="/assets/js/74.96f80ffd.js"><link rel="prefetch" href="/assets/js/75.2920c7b7.js"><link rel="prefetch" href="/assets/js/76.a90bd3c9.js"><link rel="prefetch" href="/assets/js/77.3a0eeccd.js"><link rel="prefetch" href="/assets/js/78.6791678c.js"><link rel="prefetch" href="/assets/js/79.8b0c78e4.js"><link rel="prefetch" href="/assets/js/8.b36167bf.js"><link rel="prefetch" href="/assets/js/80.2641b89d.js"><link rel="prefetch" href="/assets/js/81.03d1925e.js"><link rel="prefetch" href="/assets/js/82.71061708.js"><link rel="prefetch" href="/assets/js/83.df220a8f.js"><link rel="prefetch" href="/assets/js/84.99fbef8f.js"><link rel="prefetch" href="/assets/js/85.dee8bcae.js"><link rel="prefetch" href="/assets/js/86.5200e4ce.js"><link rel="prefetch" href="/assets/js/87.96df0d82.js"><link rel="prefetch" href="/assets/js/88.e9171a32.js"><link rel="prefetch" href="/assets/js/89.53987bbc.js"><link rel="prefetch" href="/assets/js/9.5bed6ebe.js"><link rel="prefetch" href="/assets/js/90.8da0ff06.js"><link rel="prefetch" href="/assets/js/91.4bcce2cd.js"><link rel="prefetch" href="/assets/js/92.aca18707.js"><link rel="prefetch" href="/assets/js/93.93fdf568.js"><link rel="prefetch" href="/assets/js/94.e893b256.js"><link rel="prefetch" href="/assets/js/95.cb1d62b6.js"><link rel="prefetch" href="/assets/js/96.5529545c.js"><link rel="prefetch" href="/assets/js/97.d01eda68.js"><link rel="prefetch" href="/assets/js/98.384bebd6.js"><link rel="prefetch" href="/assets/js/99.fa349b8f.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.aa72e838.js"> |
| <link rel="stylesheet" href="/assets/css/styles.0ff943f0.css"> |
| </head> |
| <body> |
| <div id="app" data-server-rendered="true"><div class="theme-container vuepress-theme-fast"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/" class="home-link router-link-active"><img src="/logo@2x.svg" alt="WEEX" class="logo"></a><span class="version"><a href="/download/download.html" class="version-bg"><img src="/assets/img/version-bg.ab65ded9.svg" alt="v0.28"><span class="version-no">v0.28</span></a></span><div class="links"><form id="search-form" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form><nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/components/image.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/components/image.html" class="nav-link">简体中文</a></li></ul></div></div></nav><a href="https://github.com/apache/incubator-weex" target="_blank" rel="noopener noreferrer" class="repo-link"><img src="/assets/img/github.7cb484a9.svg" alt="github" class="github-icon"></a></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/components/image.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/components/image.html" class="nav-link">简体中文</a></li></ul></div></div></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>API</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/api/weex-variable.html" class="sidebar-link">Weex Variable</a></li><li><a href="/docs/api/android-apis.html" class="sidebar-link">Android APIs</a></li><li><a href="/docs/api/ios-apis.html" class="sidebar-link">iOS APIs</a></li><li><a href="/docs/api/js-service.html" class="sidebar-link">JS Service</a></li><li><a href="/docs/api/broadcast-channel.html" class="sidebar-link">BroadcastChannel</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Built-in Components</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/components/a.html" class="sidebar-link"><a></a></li><li><a href="/docs/components/div.html" class="sidebar-link"><div></a></li><li><a href="/docs/components/text.html" class="sidebar-link"><text></a></li><li><a href="/docs/components/image.html" class="active sidebar-link"><image></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/components/image.html#summary" class="sidebar-link">Summary</a></li><li class="sidebar-sub-header"><a href="/docs/components/image.html#basic-usage" class="sidebar-link">Basic Usage</a></li><li class="sidebar-sub-header"><a href="/docs/components/image.html#child" class="sidebar-link">Child</a></li><li class="sidebar-sub-header"><a href="/docs/components/image.html#styles" class="sidebar-link">Styles</a></li><li class="sidebar-sub-header"><a href="/docs/components/image.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/docs/components/image.html#component-methods" class="sidebar-link">Component Methods</a></li><li class="sidebar-sub-header"><a href="/docs/components/image.html#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/docs/components/image.html#vue-example" class="sidebar-link">Vue Example</a></li><li class="sidebar-sub-header"><a href="/docs/components/image.html#rax-example" class="sidebar-link">Rax Example</a></li></ul></li><li><a href="/docs/components/list.html" class="sidebar-link"><list></a></li><li><a href="/docs/components/cell.html" class="sidebar-link"><cell></a></li><li><a href="/docs/components/loading.html" class="sidebar-link"><loading></a></li><li><a href="/docs/components/refresh.html" class="sidebar-link"><refresh></a></li><li><a href="/docs/components/recycle-list.html" class="sidebar-link"><recycle-list></a></li><li><a href="/docs/components/scroller.html" class="sidebar-link"><scroller></a></li><li><a href="/docs/components/slider.html" class="sidebar-link"><slider></a></li><li><a href="/docs/components/indicator.html" class="sidebar-link"><indicator></a></li><li><a href="/docs/components/textarea.html" class="sidebar-link"><textarea></a></li><li><a href="/docs/components/input.html" class="sidebar-link"><input></a></li><li><a href="/docs/components/waterfall.html" class="sidebar-link"><waterfall></a></li><li><a href="/docs/components/video.html" class="sidebar-link"><video></a></li><li><a href="/docs/components/web.html" class="sidebar-link"><web></a></li><li><a href="/docs/components/richtext.html" class="sidebar-link"><richtext></a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Built-in Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/animation.html" class="sidebar-link">animation</a></li><li><a href="/docs/modules/clipboard.html" class="sidebar-link">clipboard</a></li><li><a href="/docs/modules/dom.html" class="sidebar-link">dom</a></li><li><a href="/docs/modules/globalEvent.html" class="sidebar-link">globalEvent</a></li><li><a href="/docs/modules/meta.html" class="sidebar-link">meta</a></li><li><a href="/docs/modules/modal.html" class="sidebar-link">modal</a></li><li><a href="/docs/modules/navigator.html" class="sidebar-link">navigator</a></li><li><a href="/docs/modules/picker.html" class="sidebar-link">picker</a></li><li><a href="/docs/modules/storage.html" class="sidebar-link">storage</a></li><li><a href="/docs/modules/stream.html" class="sidebar-link">stream</a></li><li><a href="/docs/modules/webview.html" class="sidebar-link">webview</a></li><li><a href="/docs/modules/websockets.html" class="sidebar-link">webSockets</a></li><li><a href="/docs/modules/deviceInfo.html" class="sidebar-link">deviceInfo</a></li><li><a href="/docs/modules/console-log.html" class="sidebar-link">console-log</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Styles</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/styles/common-styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/docs/styles/text-styles.html" class="sidebar-link">Text Styles</a></li><li><a href="/docs/styles/css-units.html" class="sidebar-link">CSS Units</a></li><li><a href="/docs/styles/color-name.html" class="sidebar-link">Color name</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Events</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/events/common-events.html" class="sidebar-link">Common Events</a></li><li><a href="/docs/events/event-bubbling.html" class="sidebar-link">Event Bubble</a></li><li><a href="/docs/events/gesture.html" class="sidebar-link">Gesture</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="image"><a href="#image" class="header-anchor">#</a> <image></h1><h2 id="summary"><a href="#summary" class="header-anchor">#</a> Summary</h2><p><code><image></code> is used to display a single image in your interface.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>Always use <code><image></code> in your code, as <code><img></code> exists only for backward compatibility reasons and may removed in the future release.</li><li>Weex doesn't have built-in library for image downloading and caching, as there are some great open source library like <a href="https://github.com/rs/SDWebImage" target="_blank" rel="noopener noreferrer">SDWebImage in iOS<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> and <a href="https://github.com/square/picasso" target="_blank" rel="noopener noreferrer">Picasso in Android<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> handling these problem, so please add native image adapter/handler before using <code><image></code>. Ref <a href="/docs/api/android-apis.html">Android adapter</a> and <a href="/docs/api/ios-apis.html">iOS handler</a>.</li></ul></div><h2 id="basic-usage"><a href="#basic-usage" class="header-anchor">#</a> Basic Usage</h2><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>500px</span><span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://vuejs.org/images/logo.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span> |
| </code></pre></div><p>See the <a href="http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f" target="_blank" rel="noopener noreferrer">example<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p><h2 id="child"><a href="#child" class="header-anchor">#</a> Child</h2><p><code><image></code> doesn't support any child component.</p><h2 id="styles"><a href="#styles" class="header-anchor">#</a> Styles</h2><ul><li><strong>common styles</strong>. Check out <a href="/docs/styles/common-styles.html">common styles</a>.</li></ul><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The style of <code>width</code>, <code>height</code> and <code>src</code> must be specified, otherwise it will load nothing.</p></div><h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2><table><thead><tr><th>Attribute</th><th>Type</th><th>Value</th><th>Default Value</th></tr></thead><tbody><tr><td><code>placeholder</code></td><td>String</td><td>{URL / Base64}</td><td>-</td></tr><tr><td><code>resize</code></td><td>String</td><td>cover / contain / stretch</td><td>stretch</td></tr><tr><td><code>src</code></td><td>String</td><td>{URL / Base64 }</td><td>-</td></tr><tr><td><code>quality</code></td><td>String</td><td>original/normal/low/high/auto</td><td>-</td></tr><tr><td><code>autoBitmapRecycle</code><span class="badge warning top">Android</span></td><td>Boolean</td><td>{true / false }</td><td>true</td></tr></tbody></table><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>You can specify a relative URL for <code>src</code> and <code>placeholder</code>, relative URL will be rewritten to the to the actual resource URL (local or remote). See also: <a href="/guide/advanced/asset-path.html">Path</a>.</li><li><code>quality</code> attribute is parsed by WeexSDK but not handled. WeexSDK will pass this value to image handler.</li><li>If <code>resize</code> property does not work as expected, the image may be clipped by image downloader. You can use "quality='original'" to solve the problem.</li></ul></div><h3 id="placeholder"><a href="#placeholder" class="header-anchor">#</a> placeholder</h3><p>A URL value for placeholder image. It will be displayed during image downloading and replaced as soon as the image gets loaded.<a href="http://dotwe.org/vue/712ef102fc5e073b6c7e3b701545681c" target="_blank" rel="noopener noreferrer">(Example)<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h3 id="resize"><a href="#resize" class="header-anchor">#</a> resize</h3><p><img src="/assets/img/image-resize-property.473cb8dc.png" alt="image resize property"></p><ul><li><p><code>contain</code>: Scales the image as large as possible without cropping or stretching it. Remaining area within bounds is transparent (<a href="http://dotwe.org/vue/89be94dcd1fec73b77246ec46c678914" target="_blank" rel="noopener noreferrer">Example<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</p></li><li><p><code>cover</code>: Scales the image as large as possible without stretching it. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains. (<a href="http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490" target="_blank" rel="noopener noreferrer">Example<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</p></li><li><p><code>stretch</code>: <code>Default value</code>. Scales the content to fit the size of the element itself by changing the aspect ratio of the image if necessary. (<a href="http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490" target="_blank" rel="noopener noreferrer">Example<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</p></li></ul><p><code>resize</code> property is similar to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" target="_blank" rel="noopener noreferrer"><code>background-size</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p><h3 id="src"><a href="#src" class="header-anchor">#</a> src</h3><p>The URL of the image to display. This attribute is mandatory for the <code><image></code> component.</p><h4 id="supported-image-formats"><a href="#supported-image-formats" class="header-anchor">#</a> Supported Image Formats</h4><p>Weex doesn't give a list of image formats that must be supported, it mainly relies on the image adapter/handler you are using. For example, if you are using <a href="https://github.com/rs/SDWebImage#supported-image-formats" target="_blank" rel="noopener noreferrer">SDWebImage<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> as the image adapter on iOS, you can use image formats like JPEG, PNG, GIF, WebP, etc.</p><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p>The default image adapter on Android doesn't support gif.</p></div><h3 id="autobitmaprecycle"><a href="#autobitmaprecycle" class="header-anchor">#</a> autoBitmapRecycle</h3><p>A boolean flag which controls whether recycle the memory of image when the image is out of the screen.</p><ul><li><code>true</code> for recycling the memory of image when the image is out of the screen.</li><li><code>false</code> for not recycling the memory of image when the image is out of the screen, which may provide better user experience with more memory cost.</li><li>The default value is <code>true</code></li></ul><h2 id="component-methods"><a href="#component-methods" class="header-anchor">#</a> Component Methods</h2><h3 id="save-v0-16-0"><a href="#save-v0-16-0" class="header-anchor">#</a><code>save</code><span class="api-version">v0.16.0+</span></h3><p>Save <code><image></code> content to the local device or photo album, this operation may require device permission.</p><p><strong>Parameters</strong>:</p><ul><li><code>callback</code>: {Function} A function which is called after the image has been saved to the local device or photo album. Callback parameters: |
| <ul><li><code>result</code>: {Object} Callback result whose properties are: |
| <ul><li><code>success</code>: {Boolean} A flag indicating whether the image has been saved completed.</li><li><code>errorDesc</code>: {String} A string containing the description of the error if image is not written successfully.</li></ul></li></ul></li></ul><p><strong>Return value</strong>: null</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>You must add <code>NSPhotoLibraryAddUsageDescription</code> and <code>NSPhotoLibraryAddUsageDescription</code> (iOS 11) to enable the access permission of the iOS photo album. See also: <a href="https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html" target="_blank" rel="noopener noreferrer">Cocoa Keys<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p></div><h4 id="use-save-method"><a href="#use-save-method" class="header-anchor">#</a> Use <code>save</code> Method</h4><p>Add <code>ref</code> attribute (Vue.js <em><a href="https://vuejs.org/v2/guide/components.html#Child-Component-Refs" target="_blank" rel="noopener noreferrer">Child Component Refs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></em>) on <code><image></code>:</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>poster<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/image.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span> |
| </code></pre></div><p>Get the component reference and use the <code>save</code> method:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> $image <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>poster |
| $image<span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Do something to handle success</span> |
| <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> |
| console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>errorDesc<span class="token punctuation">)</span> |
| <span class="token comment">// Do something to handle failure</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span> |
| </code></pre></div><p>Complete example goes <a href="http://dotwe.org/vue/fadcd44a7031943ff0feaaf1895df414" target="_blank" rel="noopener noreferrer">here<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p><h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2><ul><li><strong>common events</strong>. Check out <a href="/docs/events/common-events.html">common events</a>.</li></ul><h3 id="load"><a href="#load" class="header-anchor">#</a><code>load</code></h3><p><code>load</code> event handler will be called when the image is loaded.</p><p><strong>Event object</strong>:</p><ul><li><code>success</code>: {Boolean} It shows that whether the image is loaded successfully.</li><li><code>size</code>: {Object} The loaded image size whose properties are: |
| <ul><li><code>naturalWidth</code>: {Number} The intrinsic width of image displayed on device, it will be zero if the specified image cannot be loaded correctly.</li><li><code>naturalHeight</code>: {Number} the intrinsic height of image displayed on device, it will be zero if the specified image cannot be loaded correctly.</li></ul></li></ul><h4 id="handle-load-event"><a href="#handle-load-event" class="header-anchor">#</a> Handle <code>load</code> Event</h4><p>Bind <code>load</code> event on <code><image></code>:</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">@load</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>onImageLoad<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/image.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span> |
| </code></pre></div><p>Add event handler:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> |
| methods<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
| <span class="token function">onImageLoad</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Do something to hanlde success</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| </code></pre></div><p>Complete example goes <a href="http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0" target="_blank" rel="noopener noreferrer">here<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p><h2 id="vue-example"><a href="#vue-example" class="header-anchor">#</a> Vue Example</h2><ul><li><a href="http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c" target="_blank" rel="noopener noreferrer">Base64 example<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803" target="_blank" rel="noopener noreferrer">Lazy load image example<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul><h2 id="rax-example"><a href="#rax-example" class="header-anchor">#</a> Rax Example</h2><p><code>rax-image</code> is the component <code><image></code> of rax, which can run in web and weex.</p><div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createElement<span class="token punctuation">,</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rax'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> Driver <span class="token keyword">from</span> <span class="token string">"driver-universal"</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> Image <span class="token keyword">from</span> <span class="token string">'rax-image'</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token punctuation">(</span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> |
| <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> |
| uri<span class="token punctuation">:</span> <span class="token string">'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png'</span><span class="token punctuation">,</span> |
| <span class="token punctuation">}</span><span class="token punctuation">}</span></span> |
| <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> |
| height<span class="token punctuation">:</span> <span class="token string">'68rpx'</span><span class="token punctuation">,</span> |
| width<span class="token punctuation">:</span> <span class="token string">'67rpx'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">}</span></span> |
| <span class="token punctuation">/></span></span> |
| <span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| |
| <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token punctuation">{</span> driver<span class="token punctuation">:</span> Driver <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><p><a href="https://rax.js.org/docs/components/image" target="_blank" rel="noopener noreferrer">rax-image doc<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div><div class="page-nav"><p class="inner"><span class="prev"> |
| ← |
| <a href="/docs/components/text.html" class="prev"> |
| <text> |
| </a></span><span class="next"><a href="/docs/components/list.html"> |
| <list> |
| </a> |
| → |
| </span></p></div><div class="page-edit"><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">12/10/2020</span></div><div class="edit-link"><a href="https://github.com/apache/incubator-weex-site/edit/master/docs/docs/components/image.md" target="_blank" rel="noopener noreferrer">Edit this page</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><a href="https://github.com/apache/incubator-weex-site/issues/new?body=https%3A%2F%2Fweex.io%2F" target="_blank" rel="noopener noreferrer" class="issueText">Suggest</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="score"><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon">Excellent doc</span><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon bad">Unusable doc</span></div></div><div class="license-wrap" style="display:none;"><footer class="footer-container" data-v-0ad13d84><div class="footer-body" data-v-0ad13d84><img src="/logo@2x.svg" class="logo" data-v-0ad13d84><img src="//img.alicdn.com/tfs/TB11BRiIW6qK1RjSZFmXXX0PFXa-365-365.png" class="apache" data-v-0ad13d84><div class="cols-container" data-v-0ad13d84><div class="col col-12" data-v-0ad13d84><h3 data-v-0ad13d84>Disclaimer</h3><p data-v-0ad13d84>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the |
| Incubator. Incubation is required of all newly accepted projects until a further review indicates that the |
| infrastructure, communications, and decision making process have stabilized in a manner consistent with |
| other successful ASF projects. While incubation status is not necessarily a reflection of the completeness |
| or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>ASF</dt><dd data-v-0ad13d84><a href="http://www.apache.org" target="_self" data-v-0ad13d84>Foundation</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/licenses/" target="_self" data-v-0ad13d84>License</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/events/current-event" target="_self" data-v-0ad13d84>Events</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/sponsorship.html" target="_self" data-v-0ad13d84>Sponsorship</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/thanks.html" target="_self" data-v-0ad13d84>Thanks</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Documentation</dt><dd data-v-0ad13d84><a href="/guide/develop/create-a-new-app.html" target="_self" data-v-0ad13d84>Quick start</a></dd><dd data-v-0ad13d84><a href="/guide/develop/setup-develop-environment.html" target="_self" data-v-0ad13d84>Developer guide</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Resources</dt><dd data-v-0ad13d84><a href="/blog/write-a-blog.html" target="_self" data-v-0ad13d84>Blog</a></dd><dd data-v-0ad13d84><a href="/community/" target="_self" data-v-0ad13d84>Community</a></dd><dd data-v-0ad13d84><a href="/guide/contribute/thanks.html" target="_self" data-v-0ad13d84>Thanks by Weex</a></dd><dd data-v-0ad13d84><a href="https://www.apache.org/security/" target="_self" data-v-0ad13d84>Security</a></dd></dl></div></div><div class="copyright" data-v-0ad13d84><span data-v-0ad13d84>Copyright © 2018-2019 The Apache Software Foundation. Apache and the Apache feather |
| logo are trademarks of The Apache Software Foundation.</span></div></div></footer></div></div><!----></div></div> |
| <script src="/assets/js/app.0ff943f0.js" defer></script><script src="/assets/js/26.8905d6a0.js" defer></script> |
| </body> |
| </html> |
