解决 img标签 :src获取静态资源 图片无法显示

背景

我专门写了一个配置项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'
    }
  ]