img src属性上的vuejs数据绑定出现404错误

我试图将img src属性绑定到图像路径的变量,但没有成功。但如果我复制并粘贴了相同的路径,那么它就可以工作了。我哪里做错了?

错误消息:http://localhost:8080/@/资产/结果图像/大豆。jpg 404(未找到)

<template>
  <img :src= "imgSrc" alt="No image available"/>      //This doesn't work
  <img src= "@/assets/result-images/Soya-bean.jpg" alt="No image available"/>  //This works
</template>

<script>
import {ref} from 'vue'
export default {
  setup(){
    const imgSrc = ref()
    imgSrc.value = "@/assets/result-images/Soya-bean.jpg"
    return{imgSrc}
  }
}
</script>

What it looks like on the browser