{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"0018571383db03614b7113c2571fe12665c5bc69","tarball":"https://registry.npmjs.org/rax-image/-/rax-image-1.1.3-beta.1.tgz","fileCount":36,"integrity":"sha512-E2D880f6d7hlCizP6Cf9D5gmwcBeQBDv1zqNl1yBL16UCMeg2ZTuMTQeAy8c+A7iOofv5W5AfhRq4AY2wNuGLw==","signatures":[{"sig":"MEUCIAT6GQcvi+x6kLJu/5fpWhoXFnY+cIxo9F9EqzoRfoWmAiEAnxglsr6TH2DxLe8gs5yI3+6NOO/+cYGY7QJoPIpoxYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsqplCRA9TVsSAnZWagAAAbgP/2IyMj4B1fMjdvBfIuyz\n5C+qJX7leC+PTt+Q2wI+Js/RZ7fysG5XRUB9J2NPmkRmstg9lkBHJRk+nE1V\nTuFBVaUjPyuGG8LKnqkONixys5O3I8e3nXFn3oU1gNFbNqqM5M6hTDW0ISPX\nxMgpdcujYtwBPRo5BcjWDGmeLbP4UWxLFdcCW1VyXT1qy0L78wNk0DHYhKhK\n/49l8Of/GHMilK8WidnwLwmW8avq68+3WFferavUkptkpVJUEo0Am+i4SBCl\n8BF/BaM4zd54LcH9wTBnb4ESFH5ftziQXWQuuFhsypvfpK+kDP62FDT3ww94\nfGl0vobDaVG6896QY94ZGwAoNiJ4Njfyju/k9bSBqiGx6WeJAQj3fPji7YC6\nMB4ay5aFFTSUedUv+rUo914v17+29bDnlSpbVtR4oSWl5KEncRa0u+tAshV2\nulMqDhg7ep0XtafZU4xA7UmePdnsfGU/kUJvt82jDEd5ZMF7oDkpxavtoB6e\nkzoQAcdcQczK7v//4/dlk4iWEcU8gUx5E+IQ4K39yy7XqPDm9dLZkugkn/8U\n5u4vFebpT7hPxLDrZxleNpEaRSFqftR/ALl335kRPhWwZ2T0gwaj0kC0Ern5\nwxwfuB85+2iaBYV+QW7vgCZJqwPGOE3Wk56FSi5m7It8xrGWuXag5qq15J9V\nbF8i\r\n=Jo0r\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"},"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":"solojiang","email":"feifeishen1996@gmail.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.10.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":"solojiang","email":"feifeishen1996@gmail.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","main:wechat":"lib/miniapp-wechat/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.3-beta.1_1571990117497_0.5942724133210227","host":"s3://npm-registry-packages"},"_id":"rax-image@1.1.3-beta.1","version":"1.1.3-beta.1"}