Vue3 引入图片无法显示！！百度了半天了

有没有人知道解决方法呀
data

    data() {
        return {
          backgroundImageSrc: require('../assets/bj0.png'),
        }
    },

template

<!-- 页面1 -->
    div id="page1" class="page" style="height: 1440px;">
      <img style="height: 100%;" :src="backgroundImageSrc">
    </div>

尝试了很多方法都不行：
～@/assets/bj0.png
@/assets/bj0.png
require('../assets/bj0.png')

在使用require后报错：

index.vue:30 
        
       Uncaught (in promise) ReferenceError: require is not defined
    at Proxy.data (index.vue:30)
    at applyOptions (runtime-core.esm-bundler.js:2394)
    at finishComponentSetup (runtime-core.esm-bundler.js:6715)
    at setupStatefulComponent (runtime-core.esm-bundler.js:6634)
    at setupComponent (runtime-core.esm-bundler.js:6564)
    at mountComponent (runtime-core.esm-bundler.js:4423)
    at processComponent (runtime-core.esm-bundler.js:4398)
    at patch (runtime-core.esm-bundler.js:3993)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4608)
    at ReactiveEffect.run (reactivity.esm-bundler.js:160)

vue2.0支持require导入，到了vue3.0是不支持这个方法的，可以用import试试

这是告诉你它识别不了require，重点不是你路径有没有错，把导入图片写在Vue数据代码外试试，在哪里导包就在哪里导图片

毫无疑问，图片路径有问题，你这样写就代表当前的vue文件的上级目录和assets目录是同级的，但如果当前vue文件所在的目录是components里面的某个目录就不行了

加了个src就搞定了，弄了半天～

解决文章采纳：https://blog.csdn.net/weixin_44717047/article/details/119846671