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

文章转自：https://www.cnblogs.com/lemoncool/p/11284586.html

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

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

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

上文的弊端有两个：

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

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

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

1 2 3 4 5 6 7

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

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

 

1 2 3 4 5 6

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