{"bugs":{"url":"https://github.com/raxjs/rax-components/issues"},"dist":{"shasum":"911e22fd052d7d27e22fe25793502390406cb71f","tarball":"https://registry.npmjs.org/rax-image/-/rax-image-2.4.1-0.tgz","fileCount":103,"integrity":"sha512-rzxp8MvwoDIZOAOz6w4z5zWZOM6AA1t+fR7bSIDoTpGA6fgY3SzS7Nj1DY9kQs0HEHqeGAB2A7SztAgxafTK3Q==","signatures":[{"sig":"MEQCIHF7AKed3hlb9eE+du8GVBUzoWvQWOY7Djghy0IqH27pAiAMALqd+innOIAieaSPn1IllvcCk5bobx02PcciZgnxOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqGtNCRA9TVsSAnZWagAApfgQAJmhdkc+s6u0DRudjCku\n/NRFSFKqqF32CbrsWyVqpOJfNzUg92FZJEtqBb/aQTFXjJAGOO/qs7aAdKvK\nI5lVLMitjn8wH3xH/EdoxLH1F0p7KHxM5rYECXpUbbue24JNpXSwvcZnusUV\nWV7pvfUwCElYJyNaLNhPa6jxNri+gvcr4b+lsc8ezZz27/D2sD17epF55x5m\nt09rySpdodgU9UmDsEf80PH4PJ5k/ZiJfE/pEzDs92kHvWGfomghGf1hrapQ\nGfy4SnXHj/iiliuc4gX3cvUWbZjKjIL0GPUy3GqffTNtRuSNRekd9K19e+AQ\nDHDXpBi3kci3chTKfryIV7I3JrXyEqfR3/Ljcav1fUeNbkX8Bgp5rqRl35mm\n6x6AJGgaqjSP01LB1VODcWnePgxWhQ0UEQf5lM+5FA5poiGN6rmT480hUcjg\nZo6qgP7RPjJ2kyDgqZtu6rTg6wmBjR5ns8lg7K67cyoPWJBR5HjsMFf1iMD3\nRxKhYmhgXysDfCslP4WeUEtImvyNmdJaoXYybIj80ax+JFuGdevUImLRky/K\n71Z9+YRtzILIevfbe3CqK9iHtVd+v639ib/1x0qVzRrXSpLT/AkgNG/4VFdS\nAKcv+X43bDvYhB4FKRX37pDgKHVtLMwtmh5wH6fT+nPVxN0KbNeoolhuSjAY\nu68T\r\n=04gi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-image","types":"lib/index.d.ts","module":"es/index.js","readme":"# Image\n\n[](https://www.npmjs.com/package/rax-image)\n\n> 阿里内部同学推荐使用 `@ali/rax-picture`，对图片尺寸有很多内置的优化策略\n\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","exports":{".":{"web":"./es/web/index.js","weex":"./es/weex/index.js","default":"./es/index.js","miniapp":"./es/miniapp-runtime/index.js","baidu-smartprogram":"./es/miniapp-runtime/index.js","bytedance-microapp":"./es/miniapp-runtime/index.js","wechat-miniprogram":"./es/miniapp-runtime/index.js","kuaishou-miniprogram":"./es/miniapp-runtime/index.js"},"./*":"./*"},"license":"BSD-3-Clause","scripts":{"build":"../../node_modules/.bin/build-scripts build --config ../../build.json --skip-demo","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/raxjs/rax-components#readme","keywords":["Rax","rax-component","react-component"],"repository":{"url":"git+https://github.com/raxjs/rax-components.git","type":"git"},"_npmVersion":"6.14.12","description":"Image component for Rax.","directories":{},"maintainers":[{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"miniprogram":".","_nodeVersion":"14.16.1","dependencies":{"universal-env":"^3.0.0"},"miniappConfig":{"main":"lib/miniapp-native/ali-miniapp/index","main:wechat":"lib/miniapp-native/wechat-miniprogram/index","main:quickapp":"lib/miniapp-native/quickapp/index","main:bytedance":"lib/miniapp-native/bytedance-microapp/index"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"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.4.1-0_1638427469072_0.4474545142811843","host":"s3://npm-registry-packages"},"_id":"rax-image@2.4.1-0","version":"2.4.1-0"}