img src 属性上的 vuejs 数据绑定给出 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>

What it looks like on the browser

Answer 1

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

应该做。

文档 here.

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

vuejs data binding on img src attribute give 404 error

html

image

vue.js

data-binding