问题描述: 最近做一个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