vue项目加载图片问题（未解决）

问题描述： 最近做一个vue项目，自己想封装一个小组件，但是组件中图片是父级定义的，因此路径需要父级传过来，子级去显示。

做项目的时候发现在vue中，使用img标签直接加载图片是没有问题的

<img src="@/assets/img/demo.png">

但是当src使用变量，则会被编译为字符串，导致编译后的路径就是我们写上去的字符串形式

data() {
  return {
    src: '@/assets/img/demo.png' 
  }
}

<img :src="src">

浏览器中编译后显示的地址为我们data中定义的数据，显然没有经过编译。

经过查阅发现这些资源需要进行请求，可以使用require进行资源请求，于是我这么写

let src = '@/assets/img/demo.png';
require(src)

直接报错，查询发现require内容不能使用变量。

===========================================

扩展参阅

https://lvyongbo.gitbooks.io/vuejs-templates/content/static.html