https://github.com/chenchenwuai/v-auth-image
一个展示带权限图片的vue2指令，自定义请求header，使用原生请求方法，支持加载成功和失败回调，不依赖axios。
https://github.com/chenchenwuai/v-auth-image
authentication image vue vue-auth-image vue-image
Last synced: 23 days ago
JSON representation
一个展示带权限图片的vue2指令，自定义请求header，使用原生请求方法，支持加载成功和失败回调，不依赖axios。
- Host: GitHub
- URL: https://github.com/chenchenwuai/v-auth-image
- Owner: chenchenwuai
- Created: 2020-05-18T07:46:55.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-12-12T00:53:44.000Z (over 3 years ago)
- Last Synced: 2025-05-11T04:56:00.995Z (23 days ago)
- Topics: authentication, image, vue, vue-auth-image, vue-image
- Language: JavaScript
- Homepage:
- Size: 162 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# v-auth-image
一个显示有认证机制的图片的vue2指令
## 特点
+ 可自定义`header`字段，无限制数量
+ 简单易用，结构简单，只有一个`v-auth-image`指令
## 安装
```bash
npm i v-auth-image
```
## 使用
### 注册指令
```js
import vAuthImage from 'v-auth-image'
Vue.use(vAuthImage,{
// 默认图片，还未加载图片显示。[可选]
defaultSRC:'default.logo',
/**
* 默认请求headers，[可选]，类似于
* { Authorization: "bearer xasdasdfasdfa", 'x-token': "x-token this is a x-token" } 的对象
*/
defaultHeaders:{
Authorization: "bearer this is a authorization"
},
// 动态获取到的headers，会与 defaultHeaders 覆盖合并。[可选]
getHeaders: getHeaders
})
function getHeaders(){
return {
'x-token': "x-token this is a x-token",
Authorization: "bearer this is a authorization2"
}
}
```
### 使用指令 v-auth-image
```html
![]()
export default {
data () {
return {
imageUrl: 'http://xxx.xxx.png'
}
},
methods:{
imageLoadSuccess(e){
console.log('load success',e);
},
imageLoadError(e){
console.log('load error',e);
}
}
}
```