Vue中动态（import 、require）显示img图片

vue中，经常会遇到显示图片的问题，

如果是一个普通组件的话，那么这样就可以了

<img src="../assets/images/avtor.jpg" width="100%">

上文的弊端有两个：

首先，是采用绝对路径引入。如果以后图片移动了位置，需要修改代码。

其次，如果说图片是一个logo图片，同一页面内有多处用到。就需要引用多次，同理，修改也要修改多处。

所以，动态引入才是王道啊~如果想写成动态的呢，可以试试如下办法：

<img :src="logo">
import logo from '@assets/images/avatar.png';
data() {
    return {
        logo
    }
}

此种办法必须要在data 里注册一下，直接用会不显示。

 

<img :src="logo">
data() {
    return {
        logo:require("@assets/images/avatar.png")
    }
}