js控制动态图片url 无法找到图片路径

错误代码：

                    <div
                        v-for="item in columnTabList.tabList"
                        :key="item.id"
                        class="animate__animated animate__fadeInRight"
                        v-show="columnTabList.currentId == item.id"
                    >
                        <img :src="item.imgUrl" :onerror="item.imgUrl" alt="" />
                        {{ item.imgUrl }}
                    </div>

       columnTabList: {
                currentId: 1,
                tabList: [
                    {
                        id: 1,
                        title: "找同行厂家渠道",
                        text: "支持通过品牌检索竞对同行厂家已合作的经销商代理商，定向挖掘",
                        imgUrl: "../../assets/img/zqd/zqd-list-two.png",
                    },
                    {
                        id: 3,
                        title: "找医院合作经销商",
                        text: "支持按医院查询合作经销商，可查看经销商合作记录和产品",
                        imgUrl: "@img/zqd/zqd-list-three.png",
                    },
}

效果： 

 原因：require是运行时加载模块,但import命令编译完加载

正常的图片引入是用img标签或者元素背景图的方式，采用这种方式的图片，webpack都能正常打包并显示。但是如果直接在js文件中定义图片路径，并赋给图片元素的话不能正常显示的，这是因为webpack打包后，会将静态资源文件放在dist/static/img下，我们的网站实际上以dist目录作为根目录，并由此加载该目录下的index.html所需的css、js、img等。而当我们在js文件中动态引入图片时url-loader是无法探测到图片路径的。我们build后发现，图片根本不会打包输出到dist目录（webpack是按需打包的）。

解决方法：require引入的方式

                    {
                        id: 1,
                        title: "找区域经销商",
                        text: "支持按代理产品、按科室搜索各种地区与医院合作的代理商",
                        imgUrl: require("@img/zqd/zqd-list-one.png"),
                    },