vuejs data binding on img src attribute give 404 error


I tried to bind the img src attribute to a variable for the path of the image, and it didn’t work. But if I copied and pasted the the same path in, then it works. Where did I get things wrong?

The error message: http://localhost:8080/@/assets/result-images/Soya-bean.jpg 404 (Not Found)

  <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

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

What it looks like on the browser


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

should do it.

Documentation here.

Answered By – tao

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.