{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"1265bae9b0de43103f686f8c3d8dd7b63bb7c9b3","tarball":"https://registry.npmjs.org/rax-image/-/rax-image-1.0.4-beta.1.tgz","fileCount":24,"integrity":"sha512-vFh1EdijrxzuN7myhi2VvT0q71taT8iQ/4uGLLlHd+NFk4IUZUgyFeNZHEzJf5eSdHQEmqYUJdebNe9Q6T6ySg==","signatures":[{"sig":"MEUCIC/rsoHjs6KjBhwFdsk6AZltYGrCH7ZUe6or4PwYhAPXAiEAtt2clC/7br1SzB2eRoQ5tV/C7gbcxW2sVNR13kHtydw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJda1DXCRA9TVsSAnZWagAAuwkP/jo8f1NlkW9EH728uEl6\nLgrCLogp0TDdksr5TCfZB2zn7U4bpJU3Mi7gDIzsl2MkCS1md5cKsWvLbNYq\nJYqSJA92G0sMf7tBGo6Qz4tnpHrZoZtMhvNdPe/+ZtL8j+Fg7mrjFLggRnhl\nDCixGKLElmkasHEw7vJMAMtKmSeRAR3GB9CKZaPhuAqtNzoGGM50hgSD4xWS\nBXH0KzX1XNpxVTh7S0MBbAiHqXYiv/g8FzIcElLaSYEEXdLQxy7xjn5ZjWm/\nvueqHtZBI3EQ5KWswdpFbYFqVbSb68ouBmgdfKpSUzof+I7FyiDg/DqluFB5\neFlhcjO36bPMTOWsA21in3/hfT2jIiBz8IIwx9ecK2SKHdUZTFh8W9N8Nw6o\nSzA7RkYGCG6hMLfPckwYAxAQuLXNIYdbNzri0CN9mr5eiMvf9V/LeLD2JeKf\n9l0PG0L23Xa2k3EADQkPNEwVPSWyVVA1W7WQgipyZ6hazwMMML9xMs4sz0i7\nDuAVwRg6PY8FifktbejGSd1M3V5jeqpVTrXQDsmS+wrfzl/iJSAS3RZxpP+c\naHcchy3PyztKB5Hqj56pI6z5d8hB0YUxIm6yJ7muhjn6kMed8Zi7e3Mrfsdl\naCLsbAGV5YEcWOxSH3+Y3kwEl0YfgLZ6h4IwFEoV6lyZRtE+oOwtmYxMwSGN\ndz6f\r\n=zEKC\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":"e6096b8ed755a2d1e7085f17406940b23b5de594","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 --type 'component'","clean":"rm -rf ./lib && rm -rf ./package-lock.json","start":"rax-scripts start --type 'component' -p 8000","miniapp":"rax-scripts start --type 'component-miniapp'","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.9.0","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":{"rax-view":"^1.0.1","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","@types/jest":"^24.0.12","rax-scripts":"1.2.1","@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","@typescript-eslint/parser":"^1.7.0","@typescript-eslint/eslint-plugin":"^1.7.0"},"peerDependencies":{"rax":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rax-image_1.0.4-beta.1_1567314134838_0.45261746576465955","host":"s3://npm-registry-packages"},"_id":"rax-image@1.0.4-beta.1","version":"1.0.4-beta.1"}