How to properly import images in a Parcel project?

Question

Vue.js

I can't figure out how to properly import images. Here is the code itself:

<template>
  <el-container>
    <side-bar></side-bar>
    <el-main>
      <div class="top">
        top
      </div>

      <div class="middle">
        <el-image src="main-app.webp"></el-image>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import SideBar from '../components/SideBar'
import images from './pages/assets/images/*.*'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Root Page Content'
    }
  },
  components:
  {
    SideBar
  },
}
</script>

The image just doesn't show up. As I understand something is wrong with the paths.
And I still don't get it. In theory, the image will have to be copied after assembly to the dist folder? So he has to specify the path somehow differently?
This is how I also tried it:

<template>
  <el-container>
    <side-bar></side-bar>
    <el-main>
      <div class="top">
        top
      </div>

      <div class="middle">
        <el-image src="image"></el-image>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import SideBar from '../components/SideBar'
import image from './assets/images/main-app.webp'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Root Page Content'
    }
  },
  components:
  {
    SideBar
  },

  
}
</script>