1、如何是一个普通组件的话,那么这样就可以了
<img :src="./static/images/logo.png"
上面这种是写死的,下面让我们试试进行动态显示;
<div id="head">
<img :src="logo" id="logo"> <!-- 图片当作一个模块加载 -->
<p id="title">后台管理系统</p>
</div>
export default{
data(){
return {
logo:require("./static/images/logo.png"),
}
},
}
有时候我们的组件可能是一个子组件或者子子组件那么我们这样写
<script>
import imgUrl from '@/static/images/logo.png'
export default {
name:'UserFace',
data(){
return {
//imgUrl:require("@/static/images/logo.png");
imgUrl,
}
}
}
</script>