Vue中img的src属性绑定

img的src属性绑定url变量的正确方式是使用v-bind:

//错误写法
<img src="{{ imgUrl }}"/>

//正确写法
<img v-bind:src="imgUrl"/> 
<img :src="imgUrl"/> //省略v-bind

有时候即便使用了正确的语法，依然无法正常加载图片，主要是因为imgUrl使用了本地图片的路径。
例如我们的vue文件在project/src/components/common/header.vue，图片位于project/images/logo.png。
此时如果使用下面的写法：

<img :src="../../images/logo.png"/>

运行发现图片加载失败了：

原因主要是因为网页把根域名作为相对路径的根目录了，而我们的路径是相对于项目文件的根目录，因此当然没办法找到图片。

这时候需要把图片放在vue工程的static目录下，在下面我们新建一个image文件夹。

<img :src="/static/image/logo.png"/>

这时，无论是npm run dev还是npm run build之后运行图片都能正常显示。像图片、js、css等静态文件，我们都应该放到static文件夹下，这个文件夹下的文件会按照原来的结构放在网站的根目录下。这时我们再去使用static绝对路径，就可以访问这些静态文件了。