<template>
    <div>
        <select ref='select'>
            <slot></slot>
        </select>
    </div>
</template>

<script>
import Vue from "vue"
export default {
    name: "VueSelect",
    props: ['options', 'value'],

    mounted: function () {
        var vm = this;
        $(this.$refs.select)
            .select2({
                data: this.options,
                tags: true,
                theme: "bootstrap",
                createTag: function (params) {
                    return {
                        id: params.term,
                        text: params.term,
                        newOption: true
                    }
                },
                templateResult: function (state) {
                    console.log(state)
                    if (!state.id) {
                        return state.text;
                    }
                    var baseUrl = "/dist/peoples";
                    var imgUrl = baseUrl + '/' + state.element.value.toLowerCase() + '.png'

                    var $state = $(
                        '<span><img src="'+imgUrl+'" class="img-flag" /> ' + state.text + '</span>'
                    );
                    return $state;
                }
            })
            .on('change', function (ev, args) {
                if (!(args && "ignore" in args)) {
                    vm.$emit('input', $(this).val());
                    vm.$emit("change_value",$(this).val())
                }
            });

        Vue.nextTick(() => {
            $(this.$refs.select)
                .val(this.value)
                .trigger('change', { ignore: true })
        });
    },
    methods: {
        getImageUrl: function(src) {
            return require("~/assets"+src);
        }
    },  
    watch: {
        value: function (value, oldValue) {
            // update value
            $(this.$refs.select)
                .val(this.value)
                .trigger('change', { ignore: true });
        },
        options: function (options) {
            // update options
            $(this.$refs.select).select2({ data: options })
        }
    },
    destroyed: function () {
        $(this.$refs.select).off().select2('destroy')
    }
}

</script>

<style>
.select2-container--default {
    min-width: 100%;
}
</style>

这是我的Vue + Select 2组件。
问题是我不能在jQuery脚本中动态导入图像。

var baseUrl = "~/assets/images/peoples";
 var imgUrl = baseUrl + '/' + state.element.value.toLowerCase() + '.png'

根据Nuxt动态导入指南，我尝试了如下方法

var baseUrl = "~/assets/images/peoples";
 var imgUrl = require(baseUrl + '/' + state.element.value.toLowerCase() + '.png')

但它失败了。
控制台显示“无法找到模块“~/assets/images/peoples/10.png”“
此外，我无法使用“var baseUrl =“/static/images/people”使用静态文件夹导入（我将它们复制到该文件夹）
控制台显示“无法找到”。
有人能帮我吗？