vue 动态绑定图片地址不显示的处理方法

vue给img标签动态绑定本地图片资源的地址，图片加载不出来，我是这样处理的。

1. 图片地址配置文件 images.js，配置要映射的所有图片，在这里直接使用require

// images.js
export default {
    'img1': require('@/assets/image/logo1.png'),
    'img2': require('@/assets/image/logo2.png'),
    'img3': require('@/assets/image/logo3.png'),
    'img4': require('@/assets/image/logo4.png'),
}

2. 在页面中，导入 images.js模块，根据key匹配到图片直接使用即可

<template>
    <div>
        <img :src="img" alt="">
    </div>
</template>

<script>
import imgs from '@/config/images'

export default {
    data() {
        return {
            img: ''
        }
    },
    created() {
        this.img = imgs.img1
    }
}
</script>