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>
有时候src下面的路径…/是访问不到的,那么可以试试使用@代替…/

Logo

前往低代码交流专区

更多推荐