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

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

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

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

上文的弊端有两个：

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

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

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

**图片当作一个模块加载 **
方式1:

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

方式2:

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

 

注意错误写法

这个语法 写的不对, webpack打包的时候不会处理这样的, 是当作字符串来处理了。就跟CSS里你这么写 webpack也一样不会处理，webpack会替换你的这个路径, 默认除了public目录下的静态资源原样打包,对于静态资源 有的小图会给你改成base64,
上面写的三元运算, webpack并不会执行那个运算, 因为是写在vbind里的,
require和import这种实际上是打包了以后放那里等你用。三元里运算出来的结果 直接用的是打包后的资源。