{"id":16908087,"url":"https://github.com/dream2023/vue-ele-image","last_synced_at":"2025-03-20T17:17:25.485Z","repository":{"id":37734854,"uuid":"191110998","full_name":"dream2023/vue-ele-image","owner":"dream2023","description":"对 element-ui image组件进一步封装, 使其更简单、易用","archived":false,"fork":false,"pushed_at":"2023-01-03T23:49:07.000Z","size":2353,"stargazers_count":4,"open_issues_count":23,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-05-31T15:26:38.514Z","etag":null,"topics":["element-image","element-ui-image","image","vue-avatar","vue-ele-image","vue-image","vue-images"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dream2023.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-10T06:34:39.000Z","updated_at":"2021-07-22T03:19:37.000Z","dependencies_parsed_at":"2023-02-01T14:15:16.911Z","dependency_job_id":null,"html_url":"https://github.com/dream2023/vue-ele-image","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dream2023","download_url":"https://codeload.github.com/dream2023/vue-ele-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244656735,"owners_count":20488640,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-image","element-ui-image","image","vue-avatar","vue-ele-image","vue-image","vue-images"],"created_at":"2024-10-13T18:50:07.835Z","updated_at":"2025-03-20T17:17:25.463Z","avatar_url":"https://github.com/dream2023.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-ele-image | 使 element-ui image 组件更简单、好用\n\n[![license](https://img.shields.io/npm/l/vue-ele-image.svg)](https://dream2023.github.io/vue-ele-image/)\n[![npm](https://img.shields.io/npm/v/vue-ele-image.svg)](https://www.npmjs.com/package/vue-ele-image)\n[![size](https://img.shields.io/bundlephobia/minzip/vue-ele-image.svg)](https://www.npmjs.com/package/vue-ele-image)\n[![download](https://img.shields.io/npm/dw/vue-ele-image.svg)](https://npmcharts.com/compare/vue-ele-image?minimal=true)\n\n## 特点\n\n- 增加 avatar 模式\n- 可全局定义配置(lazy, fit 等)\n- 参数更简单(size, radius 等)\n- 保留所有 el-image 的特性\n\n!['ele-image'](./public/example.png)\n\n## 在线示例\n\n[https://codepen.io/dream2023/pen/GbKjBa](https://codepen.io/dream2023/pen/GbKjBa)\n\n## 安装\n\n```bash\nnpm install vue-ele-image --save\n```\n\n### 用法\n\n```js\n// 全局 (推荐)\nimport EleImage from 'vue-ele-image'\n\n// 可以配置全局默认值(配置中每一项都是可选)\nVue.use(EleImage, {\n  fit: 'cover',\n  lazy: true,\n  color: '#fff',\n  defaultSrc: 'https://dwz.cn/QYY2qkts',\n  backgroundColor: '#409EFF'\n})\n```\n\n```js\n// 局部导入\n// 这里注意要有 {} 括号\nimport { EleImage } from 'vue-ele-image'\n\nexport default {\n  components: {\n    EleImage\n  }\n}\n```\n\n## 示例\n\n```html\n\u003c!-- 普通用法 --\u003e\n\u003cele-image\n  :size=\"100\"\n  src=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\"\n/\u003e\n```\n\n```html\n\u003c!-- avatar模式(无src时) --\u003e\n\u003cele-image :size=\"50\" username=\"zhang\" src=\"\" /\u003e\n```\n\n```html\n\u003c!-- 加载失败(同官网一样, 包括其他特性) --\u003e\n\u003cel-image\u003e\n  \u003cdiv slot=\"error\" class=\"image-slot\"\u003e\n    \u003ci class=\"el-icon-picture-outline\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n\u003c/el-image\u003e\n```\n\n## Props 参数\n\n```js\nprops: {\n  username: String, // 当src不存在时, avatar模式所显示的字符\n  color: String, // avatar模式下, 字体颜色\n  backgroundColor: String, // avatar模式下, 背景色\n  size: Number, // size相当于 width === height === size\n  width: Number, // 如果给定width值, 会覆盖size值\n  height: Number, // 如果给定height值, 会覆盖size值\n  radius: String, // 圆角, 正常模式默认值 5px, 头像模式: 50%\n  defaultSrc: String, // 当src不存在时, 顶替src\n  customStyle: Object, // 自定义样式\n  src: String, // 同官网\n  alt: String, // 同官网\n  fit: String, // 同官网\n  lazy: Boolean, // 同官网\n  referrerPolicy: String, // 同官网\n  scrollContainer: [String, Object], // 同官网\n}\n```\n\n## Events 事件(同官网)\n\n## Slots 插槽(同官网)\n\n## 相关链接\n\n- [element-ui image 组件](https://element.eleme.cn/#/zh-CN/component/image)\n- [vue-avatar](https://github.com/eliep/vue-avatar)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdream2023%2Fvue-ele-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-image/lists"}