vue踩坑系列——backgroundImage路径问题

在前端开发中，background-image属性非常常见，有很多时候需要使用内联样式来绑定此属性，但是在vue-cli项目中，如果如下面代码填写路径会找不到图片

<script type="text/javascript">import TemplateNav from './TemplateNav'export default {name: 'FooterNav',components: {'TemplateNav': TemplateNav},data() {return {//使用相对路径会找不到图片shouye:'url(../../assets/images/shouye/index2x.png)',fenlei:'url(../../assets/images/shouye/fenlei2x.png)',search:'url(../../assets/images/shouye/search2x.png)',shopcart:'url(../../assets/images/shouye/gouwuche2x.png)',mine:'url(../../assets/images/shouye/I2x.png)'}},props: {num: {default: '0'}},}</script>

正确的路径应该如下面这样

data() {return {shouye:'url(' + require('../../assets/images/shouye/index2x.png') + ')',fenlei:'url(' + require('../../assets/images/shouye/fenlei2x.png') + ')',search:'url(' + require('../../assets/images/shouye/search2x.png') + ')',shopcart:'url(' + require('../../assets/images/shouye/gouwuche2x.png') + ')',mine:'url(' + require('../../assets/images/shouye/I2x.png') + ')'}},

使用require()方法，require()是node.js方法