如何在vue中讀取本地Json文件中的圖片路徑

{

"about":[
    {"url":"require('./assets/img/about1.jpg')"},
    {"url":"../../assets/img/about2.jpg"},
    {"url":"../img/about3.jpg"}
],

}

在組件Addressz中引用的

<el-col :xs="24" :sm="8" :lg="8" :xl="8" class="mt10 mtbox" v-for="ab in about" :key="ab.url">

      <div class="max-box">
        <div class="tc"><img :src="ab.url"></div>
        <p>{{ab.p1}}</p>
        <p>{{ab.p2}}</p>
      </div>

</el-col>

import data from '../assets/json/data.json'
export default {
name: 'Address',
data(){

return{
  about:[]
}

},
mounted(){

this.about = data.about;

}
}

問題是文字顯示出來了，圖片顯示不出來 ，用以上三個路徑度顯示不出來，是什么問題呢