{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"ae90ed2c06f47a8ee3cf4d95c93ee3147bcf1d14","tarball":"https://registry.npmjs.org/rax-image/-/rax-image-2.2.2-1.tgz","fileCount":51,"integrity":"sha512-NddJJ2tkJVv3W/8isWd8PtnYD6cpmEI6dsvTVvAIkdOXqwMZ+kVSfseG33a1Z1Epxudkgn0/VO2GuAmWaJk31w==","signatures":[{"sig":"MEUCIQCQ6otCy5VavU4P4PBcWWfsYQCsN9fCAU2hvKJRLyvgZAIgOxoBb0mFY8vW00kewtoi84/CtyVUhUXn1aDQJ8m/6S8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfThpjCRA9TVsSAnZWagAAp8kP/RXWCAYJXSBZeBbF9HxQ\nchX1HJZxPZnXjezDaL/a571sdkHPCJ7dL3QJaNa7zh2Z7yFkvViVhuT+rZjz\nWmQ3S1p7nk3XmzO55TwJaJhuG5oy1PShZuL0zAiwSTLod7xTSc8Lc6fw1Dh5\neVMfKuiJw1BHfkbabkFm2w2wYxY0eLx+7cp6zXwlnTZplLzTCxwiBuLHMOaL\nUBrcpklsqErZXO735i1tX8Gh/Cpb6jjEzhH54OQLDlexMa8gogxWePX5IwoO\nxn+T3BFPcmLhgyQc4Y2haOIPbDqitDD4qXbNMZ+TprBK6LCT7v96eLjlZeqm\n/drR5AWnorms2ijYJZRbAGrfZMAsGl5XrCTErVqeaMDUtYwyoeQOFidwNNjc\np6hcRoITWDhgcSmp90FIesGyP7xW+7NjNTD6t/SjjQD5jPZ4w/o/Dy9aLRar\nLcfVfnrHZ0HTlFoAktnZY89hGfr9WtfSowyNn30QUhNfOtzi1H2mG+PUhAso\n5Q/qpR2Wn+XRpAo9zA2kr0xOndOmSX2Em7ymf09TobhM0cwqacdZ0LQnV+7Q\nbDYgpZFh0biX/08sWOhcwk/W7PEOfdjnDy3p4X6UPWKEPl8O/LCRbUIwxZeL\nurtNfwgRIjqyUXO/6Egp618g0CJ6jZ2Ukiq9RlHC9FK+gIbTcBkdp3joH5iQ\n7tVr\r\n=sboo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-image","types":"lib/index.d.ts","readme":"# Image\n\n[](https://www.npmjs.com/package/rax-image)\n\n## 描述\n\n用于展示图片\n\n## 安装\n\n```bash\n$ npm install rax-image --save\n```\n\n## 引用\n\n```jsx\nimport Image from 'rax-image';\n```\n\n## 属性\n\n注：\n1、**支持**列表中的 ![\"browser\"](\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\")
代表 Web ![\"weex\"](\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\")
代表 weex ![\"miniApp\"](\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\")
代表阿里小程序![\"wechatMiniprogram\"](\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\")
代表微信小程序\n![\"bytedanceMicroApp\"](\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\")
代表头条小程序\n![\"quickApp\"](\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\")
代表快应用\n\n| **属性** | **类型** | **默认值** | **必填** | **描述** | **支持** |\n| -------------- | ------------------------------------------------- | ----------- | -------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| source | `object: {uri: string}` | - | true | 设置图片的 uri | |\n| style | `object: { width: number height: number }` | - | true | 图片样式 width 和 height 为必填属性，否则图片无法正常展示，可以补充其他属性 | |\n| fallbackSource | `object: {uri: string}` | - | false | 备用图片的 uri（当主图加载失败是加载） | |\n| resizeMode | `string： 'contain' 'cover' 'stretch'` | - | false | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小 | |\n| mode | String: | scaleToFill | false | 小程序中的[图片模式](https://docs.alipay.com/mini/component/image)，可选项更多 | |\n| quality | `string: 'original' 'normal' 'low' 'high' 'auto'` | - | false | 图片质量 | |\n| placeholder | `string` | - | false | 占位图的 URL，在图片下载过程中将展示占位图，\b 图片下载完成后将显示 source 中指定的图片。 | |\n| onClick | `function` | - | false | 点击图片时的回调函数 | |\n| onLoad | `function` | - | false | 图片加载成功的回调函数 | |\n| onError | `function` | - | false | 图片加载失败的回调函数 | |\n |\n| src | `string` | - | false | 图片下载完成后将显示 src 中指定的图片。 | \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\nWeb 下是 web 原生的 Event 事件\n\n| **成员** | **类型** | **描述** |\n| -------------------- | -------- | ------------ |\n| target | `dom` | 图片自身元素 |\n| target.naturalWidth | `number` | 图片宽度 |\n| target.naturalHeight | `number` | 图片高度 |\n\n小程序下\n\n| 成员 | 类型 | 描述 |\n| ------------- | -------- | ---------------- |\n| type | `string` | 事件类型 |\n| detail | `object` | 点击位置信息 |\n| target | `object` | 点击对象属性信息 |\n| currentTarget | `object` | 同上 |\n\n快应用下\n\n| **成员** | **类型** | **描述** |\n| -------------------- | -------- | ------------ |\n| target | `object` | 图片自身元素 |\n| target.data.width | `number` | 图片宽度 |\n| target.data.height | `number` | 图片高度 |\n\n## 示例\n\n### 普通示例\n\n```jsx\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Image from '../src/index';\n\nconst App = () => {\n const imageRef = useRef(null);\n return (\n \n );\n};\n\nrender(, document.body, { driver: DriverUniversal });\n```\n\n### 使用 fallbackSource 和 resizeMode\n\n```jsx\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Image from '../src/index';\n\nconst App = () => {\n return (\n \n );\n};\n\nrender(, document.body, { driver: DriverUniversal });\n```\n","engines":{"npm":">=3.0.0"},"license":"BSD-3-Clause","scripts":{"build":"npm run clean && ../../node_modules/.bin/build-scripts build --config ../../build.json","clean":"rm -rf ./lib ./package-lock.json ./demo/miniapp/lib ","start":"../../node_modules/.bin/build-scripts start --config ../../build.json","prepublishOnly":"npm run build"},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"homepage":"https://github.com/alibaba/rax#readme","keywords":["Rax","rax-component"],"repository":{"url":"git+https://github.com/raxjs/rax-components.git","type":"git"},"_npmVersion":"6.4.1","description":"Image component for Rax.","directories":{},"maintainers":[{"name":"amdgigabyte","email":"amdgigabyte@gmail.com"},{"name":"marc.hy","email":"marc.hy@alibaba-inc.com"},{"name":"rax-publisher","email":"rax-publisher@zeroling.com"},{"name":"recover758126","email":"761647716@qq.com"},{"name":"solojiang","email":"feifeishen1996@gmail.com"},{"name":"wintercn","email":"csf178@gmail.com"},{"name":"yuanyan","email":"yuanyan.cao@gmail.com"},{"name":"zeroling","email":"wssgcg1213@qq.com"}],"_nodeVersion":"10.11.0","dependencies":{"universal-env":"^3.0.0"},"miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/miniapp-wechat/index","main:quickapp":"lib/quickapp/index","main:bytedance":"lib/bytedance-microapp/index"},"_hasShrinkwrap":false,"quickappConfig":{"main":"lib/quickapp/index"},"readmeFilename":"README.md","devDependencies":{"rax":"^1.0.0","eslint":"^5.16.0","csstype":"^2.6.4","rax-text":"^1.0.1","@types/rax":"^1.0.0","typescript":"^3.5.3","@types/jest":"^24.0.12","@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","@typescript-eslint/parser":"^1.7.0","@typescript-eslint/eslint-plugin":"^1.7.0"},"peerDependencies":{"rax":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rax-image_2.2.2-1_1598954083342_0.8107875592616447","host":"s3://npm-registry-packages"},"_id":"rax-image@2.2.2-1","version":"2.2.2-1"}