{"_id":"@ali-i18n-fe/intl-comp-image","_rev":"1-1d879cf44b9d4ee5078f880f8686ca04","name":"@ali-i18n-fe/intl-comp-image","dist-tags":{"latest":"1.0.14"},"versions":{"1.0.14":{"name":"@ali-i18n-fe/intl-comp-image","version":"1.0.14","description":"Image","main":"./lib/index.js","types":"./lib/index.d.ts","scripts":{"start":"lsc-comp start","dev":"lsc-comp dev","build":"lsc-comp build","build-stories":"lsc-comp build-stories","watch":"lsc-comp watch","test":"lsc-comp test","babel":"lsc-comp babel","types":"lsc-comp tsc","prettier":"pretty-quick --staged"},"pre-commit":["test","prettier"],"dependencies":{"lodash":"^4.17.11"},"devDependencies":{"@ali-i18n-fe/lsc-component":"*","@types/enzyme":"^3.10.0","@types/jest":"^23.3.2","@types/lodash":"^4.14.116","@types/react":"^16.8.0","@types/react-dom":"^16.8.0","prettier":"^1.17.0","pretty-quick":"^1.11.0","pre-commit":"^1.2.2","enzyme":"^3.10.0","enzyme-adapter-react-16":"^1.15.1","jest":"^24.9.0","react":"^16.8.0","react-dom":"^16.8.0","ts-jest":"^24.1.0"},"repository":{"type":"git","url":"git@code.aliyun.com:open-dada/intl-comp-image.git"},"sideEffects":["*.css","*.scss"],"componentConfig":{"screenshot":"https://g.alicdn.com/code/npm/@alife/intl-comp-image/1.0.14/docs/preview.png"},"screenshot":"https://g.alicdn.com/code/npm/@alife/intl-comp-image/1.0.14/docs/preview.png","homepage":"https://g.alicdn.com/code/npm/@alife/intl-comp-image/1.0.14/stories/index.html","gitHead":"832b81851ac42f6c9c6f9031f474c307588136f9","_id":"@ali-i18n-fe/intl-comp-image@1.0.14","_nodeVersion":"11.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-ffN0sJxEGjfikww5OvL/9eUHX2eY8dMXagNX/BKAXl5LReNr4FOQ1OYjKdFTTnxXISBQ7H+e8yn4Tp2teC4pPw==","shasum":"b159926c36303a70fa9e5b0f0adf7f7866a4daf0","tarball":"https://registry.npmjs.org/@ali-i18n-fe/intl-comp-image/-/intl-comp-image-1.0.14.tgz","fileCount":9,"unpackedSize":15303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1XxdCRA9TVsSAnZWagAAQDQP/2gcru5FSHe0ef6Y0bDQ\nG869ruT0qf5PORnDY6eyBeZOa4Kp5x8STgVdT+id2AAgRLHH6XoTTP3jMH0F\nqkUVmbi3yyviJhDzPa4pJynAOy9PqjHG0AnX+CfDBbsMNE55brvT0Xk3J/gH\nE1Sxg/WxuS/BkL5ZV0/Z2GWEioV5/zjY7LG3n9SlJNs/BHpCHiPtxeiFUuIE\nIysisTZQRKGJf0S/RTwCrql3ogmN0clHC1PKr8VOEbWTv06XdquNHJrWJzD4\nlrgGARGUavDvtLOz7x6j0G8lG6EKFjnaIp225BEhvaEslM7gy7ck2ekpPbeQ\nJAtFhSijg0Y5O4s5VPQjHzdBIBRD29hv5BH5sVnh/4xzVhVwQpWPuTsVhc5U\nzHIg3DAZeiYCUXwLZd34n2u+pxxkVc8mzoiObPZxvVvamL3BovWDcHkVs0wN\nYv8p7ndTuHRq4d6cPyXVAUofOeFTH4DcsGuLlFN1dVD/N/sITEl7G/GWKk1k\nrGs29nyW1Zq/nINL+REucITk6Cr+YF0b7OTzoxaPqGVmoZBru8tw7ImU0PLp\nnZLJ7SXIc5EnReGjKLWI54dUapQ77p76HxNgPM6TsIjlbOQAzqtDQf+NNkOT\nrxykN8zfkTKmJ+jQWms1oL3HweeDMAyLfV1xT4A9mazEgNnvRhk6TQ7cBNAH\nzNXA\r\n=YTDj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiqMTf+B++lGvt4zSwZUjJdnL3kgUu7+RAlfj/1+UNLgIgW/+zxzRNRX3IMOsJtAVzjkveTR0bwxQSxhFgX20oBdo="}]},"_npmUser":{"name":"international_fe_alibaba","email":"international_fe@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"international_fe_alibaba","email":"international_fe@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/intl-comp-image_1.0.14_1607826524804_0.27494591090762954"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-13T02:28:44.522Z","1.0.14":"2020-12-13T02:28:44.918Z","modified":"2022-04-04T12:53:11.531Z"},"maintainers":[{"name":"international_fe_alibaba","email":"international_fe@alibaba-inc.com"}],"description":"Image","homepage":"https://g.alicdn.com/code/npm/@alife/intl-comp-image/1.0.14/stories/index.html","repository":{"type":"git","url":"git@code.aliyun.com:open-dada/intl-comp-image.git"},"readme":"# CmsImage\n\n[![Using TypeScript](https://img.shields.io/badge/%3C/%3E-TypeScript-0072C4.svg)](https://www.typescriptlang.org/)\n[![](https://npm.alibaba-inc.com/badge/v/@alife/intl-comp-image.svg)](https://npm.alibaba-inc.com/package/@alife/intl-comp-image)\n[![](https://npm.alibaba-inc.com/badge/d/@alife/intl-comp-image.svg)](https://npm.alibaba-inc.com/package/@alife/intl-comp-image)\n\n# Preview\n\n![](https://g.alicdn.com/code/npm/@alife/intl-comp-image/1.0.14/docs/preview.png)\n\n# Demo\n\n[Click to view demo](https://g.alicdn.com/code/npm/@alife/intl-comp-image/1.0.14/stories/index.html)\n\n\n# Usage\n\n```tsx\nimport Components from '@alife/intl-comp-image';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport '@alife/intl-comp-image/dist/index.css';\n\nconst Component = Components;\n\nReactDOM.render(\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n      <Component width={200} height={200} src=\"https://img.alicdn.com/tfs/TB1FQjmef1H3KVjSZFBXXbSMXXa-291-163.png\" />\n      <Component\n        width={400}\n        height={200}\n        mode={'aspectFit'}\n        src=\"https://img.alicdn.com/tfs/TB1FQjmef1H3KVjSZFBXXbSMXXa-291-163.png\"\n      />\n      <br />\n      <Component\n        width={600}\n        height={200}\n        mode={'aspectFill'}\n        src=\"https://img.alicdn.com/tfs/TB1jHkBmNv1gK0jSZFFXXb0sXXa-1440-343.png\"\n      />\n      <Component\n        width={600}\n        height={200}\n        mode={'aspectFill'}\n        src=\"https://img.alicdn.com/tfs/TB1Y_XacrY1gK0jSZTEXXXDQVXa-1416-813.png\"\n      />\n    </div>,\n    mountNode,\n  );\n``` \n\n# Props\n\nproperty | propType | default | description\n:------: | :------: | :-----: | -----------\nsrc | string |  | image src \nheight | string / number | auto | image height \nwidth | string / number | auto | image width \nmaxHeight | number |  | 图片最大高度 \nmaxWidth | number |  | 图片最大宽度 \nhref | string |  | 图片点击跳转地址jump url when clicking image \nmode | \"scaleToFill\" / \"aspectFit\" / \"aspectFill\" | scaleToFill | mode for imagescaleToFill 不保持纵横比缩放，使图片的宽高完全拉伸至填满 image 元素aspectFit 保持纵横比缩放，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来aspectFill 保持纵横比缩放，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取widthFix 宽度不变，高度自动变化，保持原图宽高比不变 \nstyle | CSSProperties |  |  \nclassName | string |  |  \ntarget | string | _blank | the way for jumping \n\n\n\n# Development\n\n### install\n\n```\nyarn\n```\n\n### start project\n\n```\nyarn start\n```\n\n### build npm package\n\n```\nyarn babel\n```\n\n### build umd package\n\n```\nyarn build\n```\n","readmeFilename":"README.md"}