Vue如何由本地js中存放的url地址获取图片

export const recommends = [
  {
    "pic": require('./1.png'),
    "name": "adidas 阿迪达斯 训练 男子",
    "price": "335",
    "num": "1"
  },
]

import { recommends } from './img/recommend/recommend';

this.recommends = recommends;

<p class="recommend-pic"><img class="recommend-img" :src="item.pic"></p>
<p class="recommend-name">{{item.name}}</p>

const RegEx = /(?<=(img src="))[^"]*?(?=")/gims

const htmlStr = '<p><img src="1.png" /><img src="2.png" /><img src="3.png" /><img src="4.png" /></p>'
const images = text.match(RegEx)

export default {
    filters: {
        getImgUrl(html) {
            const RegEx = /(?<=(img src="))[^"]*?(?=")/gims
            if(html && html.match(RegEx) && html.match(RegEx).length > 0) {
                return html.match(RegEx)[0]
            }
            return require('默认图片地址')
        },
        // 过滤HTML文本中图片地址为本地磁盘地址的图片
        getImgUrl2(html) {
            const RegEx = /(?<=(img src="))[^"]*?(?=")/gims
            if(html && html.match(RegEx) && html.match(RegEx).length > 0 && html.match(RegEx)[0].indexOf('file:///') === -1) {
                return html.match(RegEx)[0]
            }
            return require('默认图片地址')
        }
    }
}

<img :src="item.content | getImgUrl" alt="">