背景
我专门写了一个配置项js文件,用来存放data数据,如下,文件名为photographerList.js
export default [// 摄影师{id: 0,avatr: '../images/photographers/xingyi.png',name: '邢小军',adress: '上海',price: 2800,introductionUrl: 'https://www.alltuu.com/photoplatform/photoplatformResume/?id=3bbda8c97ad8e8cf&type=1'},{id: 1,avatr: '../images/photographers/zhangxiaopeng.png',name: '张小鹏',adress: '上海',price: 2800,introductionUrl: 'https://www.alltuu.com/photoplatform/photoplatformResume/?id=7e85b5379a4e3e70&type=1'}]
html页面去v-for 然后传递给子组件。photographer 是子组件名
<div v-for="(item, index) in photographerList" :key="index" style="display: inline-block" class="list-box"><photographer :photographer="item"></photographer>
</div>
在子组件里动态绑定;src用来获取图片
<img :src="photographer.avatr" class="photographer-container-avart">
问题
图片却无法显示
解决
获取静态资源,要在js里先require获取,解决如下:
export default [// 摄影师{id: 0,avatr: require('../images/photographers/xingyi.png'),name: '邢小军',adress: '上海',price: 2800,introductionUrl: 'https://www.alltuu.com/photoplatform/photoplatformResume/?id=3bbda8c97ad8e8cf&type=1'},{id: 1,avatr: require('../images/photographers/zhangxiaopeng.png'),name: '张小鹏',adress: '上海',price: 2800,introductionUrl: 'https://www.alltuu.com/photoplatform/photoplatformResume/?id=7e85b5379a4e3e70&type=1'}]