{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"70b22872bc359f885a93c5a1979affed0cdaed0f","tarball":"https://registry.npmjs.org/rax-image/-/rax-image-2.2.5-0.tgz","fileCount":50,"integrity":"sha512-OJVRCG8kOcM4fFvHheRKQwxTu5s+CADg9Ymp24Zq1tv662F/JCFeg3MbVNCEUQ+IGxy4IIm9POle9u6IU0T3Tg==","signatures":[{"sig":"MEUCIGgT1Zx4CQNSHMXuw0K9rOqoQyJCXxJmTNf6ryM429PxAiEA60NAE66LtlzdJ1gyI4nC8jCTVlviRB4CxOanZ8rHvtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAU04CRA9TVsSAnZWagAADYYP/0QGu5AwGk0uI6C2737E\nptgiiejEqsfhbh2vFisZtxoLlmJIdY37qFVGWNqQ5n5oTzfs+hKZ5Av6XnCr\n9Sp2VD75Gw7DVqaKY7dfPas7cPEgnnaWPwUMaXCkvxtUXWPLQJrvNpVWuFhC\n0kQxtGcniK4WPT7P6kzZ59qYOk7LxbK1IqcPlIYPtEFwItniVUY+dBi4ZgFN\no8yfzE3ztUx/iT+88XvL/WFmzvREi5c5PmEtGEzZyOuo9EVg6EaBYBCHBaAc\n6jkXFMU9iAmLKxrPkC95XDiSU7fAqHfcfA2tEJ6dEhCgokUegeYIxuB2YjRC\nu/SBcVgYDkg562RZlhMdhnrMAMs3sGNK0R+7HS9bZd0DBtAdcD+p0C4BxlkQ\nj3rKGxFlI78nCPJbEc3US/phil1sCAHGAff8RQv1qbabBOIfyUMgL8zRbyzA\niSWaOxA5+kT58GTADMoY9Zwt8f9NT49qxhPNeg4eXmnFf45AazvtmGmHeAY+\nBxzdsC8RbozeWeNBhTQRO6qPS0P4ORM9X0tkJ3PU4MNPqyeGjSxXxPvB9qLO\naHqc3VyKnUNp9Aiu3KC9ljYb3EYdoMq3h9XqywHIJjU4fW0SdPXJ/sXy3YxG\nXJJHUKhfwqiIpX4fsTK+50FOlHtG8FCtKbyuI198+HufOvYp2ssPbXpEwuf/\ncWs8\r\n=huOS\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## 支持\nWeb / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序\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| **属性** | **类型** | **默认值** | **必填** | **描述** | **支持** |\n| -------------- | ------------------------------------------------- | ----------- | -------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| source | `object: { width: string, height: string, uri: string}` | - | true | 设置图片的 uri。height和width为可选项，优先级低于style上的同名属性，一般高于其他CSS中的同名属性。 | ![\"browser\"](\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\")
![\"weex\"](\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\")
![\"miniApp\"](\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\")
![\"wechatMiniprogram\"](\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\")
![\"bytedanceMicroApp\"](\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\")
![\"quickApp\"](\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\")
|\n| style | `object: { width: number height: number }` | - | true | 图片样式 width 和 height 为必填属性，否则图片无法正常展示，可以补充其他属性 | |\n| fallbackSource | `object: { width: string, height: string, uri: string}` | - | false | 备用图片的 uri（当主图加载失败时加载）。height和width为可选项，优先级低于style上的同名属性，一般高于其他CSS中的同名属性。 | |\n| loading | `string: 'eager' 'lazy'` | `eager` | false | 客户端如何加载图片，其中 Web 下需要浏览器原生支持`loading`属性。 | |\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| 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.13.4","description":"Image component for Rax.","directories":{},"maintainers":[{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"miniprogram":".","_nodeVersion":"12.5.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.5-0_1610698039634_0.9924488057845762","host":"s3://npm-registry-packages"},"_id":"rax-image@2.2.5-0","version":"2.2.5-0"}