Giter VIP home page Giter VIP logo

vue-img's Introduction

vue-img

hash2path wrapper for vue 2

使用方法

安装插件

// 默认全局配置
Vue.use(VueImg)

// 自定义全局配置
Vue.use(VueImg, {
  loading: '',
  error: '',
  prefix: '',
  quality: 100
})

使用指令

基本用法

由于 Vue 2 删除了指令中的 params,故采用 object value 的形式传入参数

<!-- 设置图片 + 默认参数 -->
<img v-img="'xxx'">
<!-- 设置图片 + 自定义参数 -->
<img v-img="{ hash: 'xxx', width: 233, height: 666 }">

<!-- 设置背景 + 默认参数 -->
<div v-img="'xxx'"></div>
<!-- 设置背景 + 自定义参数 -->
<div v-img="{ hash: 'xxx', width: 12, height: 450 }"></div>

可读属性

VueImg 提供了一些属性,可用于指令以外的场合。你应当视它们为只读属性,避免直接修改。

VueImg.cdn             // [String]   当前环境的默认 CDN
VueImg.canWebp         // [Boolean]  当前环境是否支持 webP
VueImg.getSrc({ ... }) // [Function] 获取图片地址

参数列表

名称 描述 全局配置 指令参数 getSrc 函数
hash [String] 图片哈希(必填) 不支持 支持 支持
width [Number] 宽度 不支持 支持 支持
height [Number] 高度 不支持 支持 支持
quality [Number] 图片质量 支持 支持 支持
prefix [String] CDN 地址前缀 支持 支持 支持
suffix [String] CDN 处理后缀 [?] 支持 支持 支持
loading [String] 加载中默认图片哈希 支持 支持 不支持
error [String] 失败替换图片哈希 支持 支持 不支持
disableWebp [Boolean] 禁用 webP 支持 支持 支持

贡献代码

npm install  # 安装依赖
npm run dev  # 构建文件
npm run test # 单元测试

开源协议

MIT

vue-img's People

Contributors

banrikun avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.