Vue中引用图片地址

1
2
3
4
5
<template>
<div>
<img src="../../uploads/1-headimg.jpg">
</div>
</template>

以上写法合理的,但是以下写法就会报错

1
2
3
4
5
6
7
<img :src="headimg">
...
data () {
return {
headimg: '../../uploads/1-headimg.jpg'
}
},

这是因为放在模版里的图片地址是会被webpack打包出来,所以不会报错;而js里的图片地址只是字符串,webpack不会处理。如果想这么做,可以把图片放在最外层的static文件夹,或使用import require引入。

1
2
3
4
5
data () {
return {
headimg: require('../../uploads/1-headimg.jpg')
}
},
1
2
3
4
5
6
7
import headimg from '../../uploads/1-headimg.jpg'
...
data () {
return {
headimg: headimg
}
},

更简单的还可以这样写

1
<img :src="require('../../uploads/1-headimg.jpg')">

注意

require不接受变量为参数,只接受直接字符串!字符串中带有变量也不行!
举个栗子,xx是一个变量,以下写法是非法的

1
<img :src="require(xx)"> 

合理写法应该是

1
<img :src="xx">