以前在写vue的时候,经常要写这样的代码,把图片提前require给一个变量,然后再把变量传给组件(注意是组件,不是原生的东西,不是原生如img):
<template>
<div>
<avatar :default-src="logoUrl"></avatar>
</div>
</template>
<script>
methods:{
logoUrl(){
return require("`../../assects/img/logo.png`")
}
}
</script>
通过vue-loader的transformToRequire,可简化代码:
{
vue:{
transformToReuire:{
avatar:['default-src']
}
}
}
于是,我们的代码就变成了这样:
<template>
<div>
<avatar default-src="../../assects/img/logo.png"></avatar>
</div>
</template>
<script>
//methods:{
// logoUrl(){
// return require("../../assects/img/logo.png")
// }
}
</script>