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)">
|
合理写法应该是