{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"ea8b45e79759d659944964a2d40192a70f14d6a5","tarball":"https://registry.npmjs.org/rax-image/-/rax-image-1.1.2-1.tgz","fileCount":24,"integrity":"sha512-PeCwHVF7RcKFm7t5+iijhAjT+3zj4ZVGZPvTp+pOVXCBCdCo49GpDETzg2jYN6IVT/kKBXjiRV+z3S9kJL+BYQ==","signatures":[{"sig":"MEQCIFYNX7yG3vO60VcDeevT7eIUuZBm/WsbreSjHhCrFZueAiAbvpASdQchJD81iJmmXpR9NKoI48S5n+Th1wK9UPEnIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhfIBCRA9TVsSAnZWagAAV20P/016evGjh47dD/jROzUN\n95L73CIIyWlwabQSL0rDjlBmn0NrQ8Tjj6BW2B88S6sGQOrOjl1/cawL+1n0\nsdY3TitJ+hjYACX04pr+giZEKnBEk2NyZH/R0VFLEIBh/1gg+znaI3HAoyLE\nu1gn6YygFbHvcfJhu3B5HMgHm2bsCrWL2bJ/fWjC3c0K3EJxYAXF8k2mAntn\nUb85v0im5S5Lq4mz273MDL49zfAhV7JTmdgL/8USjcpB1sIBUszOgQhU26BQ\nx1kcOfpHPMOnCi4e2QIII1sxZWMEGLk335UqPKTLnY83RtPYAg3pM+L7aJew\no5I1Gszzc3ufqN7XKjnkBgV9MZAJ5sh8ptZhAA8z1Frbc6sPwYQKJz+eHqgW\nfa4pBPNncrFoVTImmiw/Qq2OeeeTajta6ePGBGKXrVq3fkA0UuvgD6GxbBXt\nf/hA1+ALhvqeMy0nPmE8C1eqzANPbVWVdPEaBskh6mJOY8Tr0g6Tc831rW2E\nt89VCx0wlXgmXoFYE7hVungXRrNdYETwYeMvn0hrfH/4lRRhnO4jEibQIhgb\nkamIQbk4Colsm958DHo4QB9hRsPIWIwwmA3lGw68rJXz5zj03q0d0oq5nAxo\njvzbXAapahnXe0uow9uor0JSaEb2qA9SgpsZMuwcPygFzg2b1ekXhZEhvyKV\n5nyF\r\n=dMp6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-image","types":"lib/index.d.ts","readme":"# Image\n\n[![npm](https://img.shields.io/npm/v/rax-image.svg)](https://www.npmjs.com/package/rax-image)\n\n\n**描述：**\nImage用于展示图片\n\n## 安装\n\n```bash\n$ npm install rax-image --save\n```\n## 引用\n\n```jsx\nimport Image from 'rax-image';\n```\n\n## 属性\n\n注：\n1、**支持**列表中的 <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表h5 <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表weex  <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表小程序\n\n| **属性**    | **类型**   | **默认值** | ** 必填 ** | **描述**           | ** 支持 ** |\n| ----------- | ---------- | ---------- | ------------ | ------------------ | ------------ |\n| source | `Object: {uri: String}` | - |   true | 设置图片的 uri | ALL |\n| style | `Object: { width: Number height: Number }` | - | true | 图片样式 width和height为必填属性，否则图片无法正常展示，可以补充其他属性| ALL |\n| fallbackSource | `Object: {uri: String}` | - | false | 备用图片的uri（当主图加载失败是加载） | ALL |\n| resizeMode | `String： 'contain' 'cover' 'stretch'` | - | false | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小 | ALL |\n| quality | `String: 'original' 'normal' 'low' 'high' 'auto'` | - | false | 图片质量 | <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" />|\n| placeholder | `String` | - | false | 占位图的 URL，在图片下载过程中将展示占位图，\b图片下载完成后将显示source中指定的图片。 | <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" />|\n| onLoad | `Function` | - | false | 图片加载成功的回调函数 | ALL |\n| onError | `Function` | - | false | 图片加载失败的回调函数 | ALL |\n\n\n### onLoad onError 返回\n\n当完成图片加载成功/失败时，将分别触发onLoad/onError中的回调函数 function(event) => {}\n\nweex下（iOS/Android）\n\n| **成员** | **类型** |** 描述** |\n| --- | --- | --- |\n| success | `boolean` | 标记图片是否成功加载，成功为1/true，失败为0/false |\n| size | `object` |  加载的图片大小对象 |\n| size.naturalWidth | `number` |  图片宽度，如果图片加载失败则为0/-1 |\n| size.naturalHeight | `number` |  图片高度，如果图片加载失败则为0/-1 |\n\nh5下是web原生的Event事件\n\n| **成员** | **类型** |** 描述** |\n| --- | --- | --- |\n| target | `Dom` | 图片自身元素 |\n| target.naturalWidth | `number` |  图片宽度 |\n| target.naturalHeight | `number` |  图片高度 |\n\n## 示例\n\n### 普通示例\n```jsx \nimport {createElement, render} from 'rax';\nimport DU from 'driver-universal';\nimport Image from '../src/index';\n\nconst App = () => {\n  const imageRef = useRef(null);\n  return (\n    <Image\n      ref={imageRef}\n      source={{\n        uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',\n      }}\n      style={{\n        height: '68',\n        width: '67'\n      }}\n   />\n  );\n};\n\nrender(<App />, document.body, { driver: DU });\n```\n\n### 使用fallbackSource和resizeMode\n\n```jsx\nimport {createElement, render} from 'rax';\nimport DU from 'driver-universal';\nimport Image from '../src/index';\n\nconst App = () => {\n  return (\n    <Image\n      source={{\n        uri: 'https://gw.alicdn.com/tfs/TB1g6AvPVXXXXa7XpXXXXXXXXXX-215-215.png'\n      }}\n      fallbackSource={{\n        uri: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg'\n      }}\n      style={{\n        width: 100,\n        height: 100,\n      }}\n      resizeMode=\"cover\"\n    />\n  );\n};\n\nrender(<App />, document.body, { driver: DU });\n```\n","engines":{"npm":">=3.0.0"},"gitHead":"10f79baa129a702e124980e0244d610cf95b1ead","license":"BSD-3-Clause","scripts":{"lint":"eslint --ext .js --ext .jsx --ext .ts --ext .tsx ./src","test":"npm run build && rax-scripts test","build":"npm run clean && rax-scripts build","clean":"rm -rf ./lib ./package-lock.json ./demo/miniapp/lib ","start":"rax-scripts start","prepublishOnly":"npm run build"},"_npmUser":{"name":"recover758126","email":"761647716@qq.com"},"homepage":"https://github.com/alibaba/rax#readme","keywords":["Rax","rax-component"],"repository":{"url":"git+https://github.com/raxjs/rax-image.git","type":"git"},"_npmVersion":"6.11.3","description":"Image component for Rax.","directories":{},"maintainers":[{"name":"amdgigabyte","email":"amdgigabyte@gmail.com"},{"name":"liangzhi.llz","email":"liangzhi.llz@alibaba-inc.com"},{"name":"marc.hy","email":"marc.hy@alibaba-inc.com"},{"name":"recover758126","email":"761647716@qq.com"},{"name":"wintercn","email":"csf178@gmail.com"},{"name":"yacheng","email":"narutosun2@163.com"},{"name":"yuanyan","email":"yuanyan.cao@gmail.com"},{"name":"zeroling","email":"wssgcg1213@qq.com"}],"_nodeVersion":"10.16.0","dependencies":{"universal-env":"^1.0.0"},"miniappConfig":{"main":"lib/miniapp/index"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"rax":"^1.0.0","eslint":"^5.16.0","csstype":"^2.6.4","rax-text":"^1.0.1","typescript":"^3.5.3","@types/jest":"^24.0.12","rax-scripts":"^2.0.0","@rax-types/rax":"^1.0.5","@types/ali-app":"^1.0.0","driver-universal":"^1.0.0-beta.5","eslint-config-rax":"^0.0.0","rax-test-renderer":"^1.0.0","rax-plugin-component":"^0.1.9","@typescript-eslint/parser":"^1.7.0","@typescript-eslint/eslint-plugin":"^1.7.0"},"peerDependencies":{"rax":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rax-image_1.1.2-1_1569059328725_0.08035962310632994","host":"s3://npm-registry-packages"},"_id":"rax-image@1.1.2-1","version":"1.1.2-1"}