{"id":13508933,"url":"https://github.com/ElemeFE/vue-img","last_synced_at":"2025-03-30T11:33:03.949Z","repository":{"id":65980044,"uuid":"88612165","full_name":"ElemeFE/vue-img","owner":"ElemeFE","description":"hash2path wrapper for vue.js","archived":false,"fork":false,"pushed_at":"2019-03-20T08:46:43.000Z","size":143,"stargazers_count":119,"open_issues_count":0,"forks_count":30,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-02-28T06:15:28.877Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ElemeFE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-18T10:23:32.000Z","updated_at":"2024-10-30T15:52:53.000Z","dependencies_parsed_at":"2023-02-19T18:40:29.095Z","dependency_job_id":null,"html_url":"https://github.com/ElemeFE/vue-img","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fvue-img","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fvue-img/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fvue-img/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fvue-img/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElemeFE","download_url":"https://codeload.github.com/ElemeFE/vue-img/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246314044,"owners_count":20757455,"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":[],"created_at":"2024-08-01T02:01:00.643Z","updated_at":"2025-03-30T11:33:03.528Z","avatar_url":"https://github.com/ElemeFE.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-img\n\n\u003e hash2path wrapper for vue 2, also surport image delay load and image size adaptation for various devices.\n\n## 使用方法\n\n### 安装插件\n\n```JS\n// 默认全局配置\nVue.use(VueImg)\n\n// 自定义全局配置\nVue.use(VueImg, {\n  loading: '',\n  error: '',\n  prefix: '',\n  quality: 100,\n  adapt: true,\n  delay: 2000, // 单位ms,\n  cdn: 'qiniu' // 选择要使用的 CDN 服务提供商，目前仅支持 `ali` 和 `qiniu`，默认为 'qiniu'\n})\n```\n\n### 使用指令\n\n#### 基本用法\n\n\u003e 由于 Vue 2 删除了指令中的 params，故采用 object value 的形式传入参数\n\n```HTML\n\u003c!-- 设置图片 + 默认参数 --\u003e\n\u003cimg v-img=\"'xxx'\"\u003e\n\u003c!-- 设置图片 + 自定义参数 --\u003e\n\u003cimg v-img=\"{ hash: 'xxx', width: 233, height: 666, defer: true, adapt: false }\"\u003e\n\n\u003c!-- 设置背景 + 默认参数 --\u003e\n\u003cdiv v-img=\"'xxx'\"\u003e\u003c/div\u003e\n\u003c!-- 设置背景 + 自定义参数 --\u003e\n\u003cdiv v-img=\"{ hash: 'xxx', width: 12, height: 450 }\"\u003e\u003c/div\u003e\n```\n\n### 可读属性\n\nVueImg 提供了一些属性，可用于指令以外的场合。你应当视它们为**只读**属性，避免直接修改。\n\n```JS\nVueImg.cdn             // [String]   当前环境所使用的 CDN 的域名，例如 http://cube.elemecdn.com\nVueImg.cdnProvider     // [String]   当前环境所使用的 CDN 服务提供商，目前仅支持 `ali` 和 `qiniu`，默认为 'qiniu'。\nVueImg.canWebp         // [Boolean]  当前环境是否支持 webP\nVueImg.getSrc({ ... }) // [Function] 获取图片地址\n```\n\n### 参数列表\n\n| 名称       | 描述                        | 全局配置 | 指令参数 | getSrc 函数 |\n| -------- | ------------------------- | :--: | :--: | :-------: |\n| hash     | [String] 图片哈希（必填）         |  ✕   |  〇   |     〇     |\n| width    | [Number] 宽度               |  ✕   |  〇   |     〇     |\n| height   | [Number] 高度               |  ✕   |  〇   |     〇     |\n| format   | [String] 强制图片格式           |  ✕   |  〇   |     〇     |\n| fallback | [String] 不支持 webP 时转换格式   |  ✕   |  〇   |     〇     |\n| quality  | [Number] 图片质量             |  〇   |  〇   |     〇     |\n| prefix   | [String] CDN 地址前缀         |  〇   |  〇   |     〇     |\n| suffix   | [String] CDN 处理后缀 [?]     |  〇   |  〇   |     〇     |\n| loading  | [String] 加载中默认图片哈希        |  〇   |  〇   |     ✕     |\n| error    | [String] 失败替换图片哈希         |  〇   |  〇   |     ✕     |\n| adapt    | [Boolean] 图片尺寸是否适配设备屏幕    |  〇   |  〇   |     〇     |\n| delay    | [Number] 设置延迟加载最大等待时长（ms） |  〇   |  ✕   |     ✕     |\n| defer     | [Boolean] 图片是否进行延迟加载      |  ✕   |  〇   |     ✕     |\n| urlFormatter | [Function] 修改 v-img 生成的 url |  ✕   |  〇   |     〇    |\n| cdn     | [String] 图片服务提供商         |  〇   |  ✕   |     ✕     |\n\n- `suffix` 参数可用于模糊、旋转等特殊处理，具体请参考[《七牛 CDN 开发者文档》](http://developer.qiniu.com/code/v6/api/kodo-api/image/imagemogr2.html)。\n- `adapt`图片尺寸是否适配设备屏幕大小，指令参数会覆盖全局配置，例如：当全局配置`adapt: true`时，指令参数`adpat: false`，那么该图片不会根据设备viewport调整尺寸。\n- `defer`延迟加载的含义，当`defer: false`时，图片在`v-img`指令的`bind`钩子函数中加载，当`defer: true`时，又分两种情况，图片在首屏和不在首屏中。在首屏中的图片会在`v-img`指令的`inserted`钩子函数中加载，非首屏的图片将等待`defer: false`和首屏中图片都加载完全后才加载。\n- `delay`延迟加载最大等待时长，默认值**5000ms**。/\n- `urlFormatter` 可以不依赖组件更新让 src 属性适配 CDN 源更新或者添加自定义参数，举例：七牛云的 imageMogr1 =\u003e imageMogr2。\n- `cdn` 指定图片服务提供商，根据不同提供商将采取不同的 URL 拼接规则，只能在全局配置。目前仅支持 `ali` 和 `qiniu`，默认为 'qiniu'。\n\n## 贡献代码\n\n```bash\nnpm install  # 安装依赖\nnpm run dev  # 构建文件\nnpm run test # 单元测试\n```\n\n- 提交代码前请确保已通过测试。\n- 更多细节请参考[《饿了么开源项目贡献指南》](https://github.com/ElemeFE/vue-img/blob/master/.github/CONTRIBUTING_zh-cn.md)。\n\n## 开源协议\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElemeFE%2Fvue-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FElemeFE%2Fvue-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElemeFE%2Fvue-img/lists"}