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

Question

我试图将img src属性绑定到图像路径的变量，但它不起作用。但如果我复制粘贴相同的路径，就可以了。我哪里做错了?

错误信息:http://localhost:8080/@/assets/result-images/Soya-bean.jpg 404 (Not Found)

<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>

浏览器显示

Answer 1

imgSrc.value = require("@/assets/result-images/Soya-bean.jpg");

应该做。

文档。