Visual Studio 在编译时提示找不到文件，图片在vue中怎么加载才不会报错？

Question

有两张图片在引用，都编译一个周了，没问题。结果刚刚编译却报找不到文件：

这两个图片是在 home 组件中加载的，下面是目录

这是什么问题，该怎么解决？
都升级了 Visual Studio 也不能解决问题。

想了一个办法，也是不行的：将图片地址 像加载变量一样 import 出来，在 data 里面定义，在组件里直接使用，也报错：

    import bannerBiometric from '@/assets/images/banner-biometric2'
    import bannerSurveillance from '@/assets/images/banner-surveillance2'
    
        //在data中定义
        data(){
            return {
                img01:bannerBiometric,
                img02:bannerSurveillance
            }
        },
        
        //在组件中这样使用
            <swiper :options="swiperOption" class="swiper-box">
                <swiper-slide class="swiper-item"><img :src="img01" alt="..."></swiper-slide>
                <swiper-slide class="swiper-item"><img :src="img02" alt="..."></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>

编译之后报这样的错误：

 ERROR  Failed to compile with 2 errors                                                                                                                                                     18:48:20
These dependencies were not found:

* @/assets/images/banner-biometric2 in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/Home.vue
* @/assets/images/banner-surveillance2 in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/Home.vue

To install them, you can run: npm install --save @/assets/images/banner-biometric2 @/assets/images/banner-surveillance2

我真不知道问题出在哪里了，之前还好好的，这图片在vue中怎么加载才不会报错？

Answer 1

<swiper-slide class="swiper-item"><img :src="reqire(src)" alt="..."></swiper-slide>

试试用require