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

Question

有没有人知道解决方法呀
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)

Answer 1

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