Easy way to use image in Vue template without write css
vue-aimg-loader
easy way to use image in Vue template without write css.
Installation
npm i -D vue-aimg-loader
yarn add --dev vue-aimg-loader
Basic configuration
webpack
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
module: {
rules: [
// ... other rules
{
test: /\.vue$/,
use: [
{ loader: 'vue-loader' },
{
loader: 'vue-aimg-loader',
options: {
imgDir: 'src/asset/img',
},
},
],
},
],
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin(),
],
};
Vue CLI
module.exports = {
chainWebpack: (config) => {
config.module
.rule('vue')
.use('vue-aimg-loader')
.loader('vue-aimg-loader')
.tap(() => {
return {
imgDir: 'src/asset/img',
};
})
.end();
},
};
Example usage
vue
<template>
<div id="app">
// default usage
<div class="img-logo" />
// img usage
<img class="img-logo" />
// get logo in test folder
<div class="img-test_logo" />
// dynamic class
<div :class="random1 > random2 ? 'img-logo1' : 'img-logo2'" />
// img dynamic class
<img :class="random1 > random2 ? 'img-logo1' : 'img-logo2'" />
</div>
</template>
recommend global css
[class*='img-'] {
object-fit: contain;
background-size: contain;
}
Option
imgDir
- type:
String - default:
src/asset/img
Path to the folder containing the image file.
prefix
- type:
String - default:
img-
class prefix.
unit
- type:
String - default:
px
image size unit.
rate
- type:
String - default:
1
image size rate.
scoped
- type:
Boolean - default:
false
If true, image style will be scoped.
extendTypes
- type:
Array - default:
[]
default types are ['png', 'jpg', 'jpeg'], you can use extendTypes to extend it.
License
MIT License