In Vue 3 how do I reference a local resource when using a UI Framework (without "@")?

Question

I am accustomed to using the "@" character in Vue 3 so the location will still be referenced after Vite build, as in the following example:

<img src="@/assets/picture.jpg" />

With custom components from UI Frameworks, I can't figure out how to reference my images anymore, The "@" no longer works. since it is rendering out the custom component.

Element Plus example:

<el-image src="@/assets/picture.jpg" />

I tried using various permutations without the "@" sign. I couldn't readily find the answer in Vue 3 docs or docs for Element Plus or Chakra UI frameworks, and it is a hard question to search for here.

Answer 1

Okay, I found out how this can work, but it's hardly a solution

<script setup>
import imageUrl from "@/assets/picture.jpg";
</script>

<template>
  <div>
    <el-image :src="imageUrl" />
  </div>
</template>