vuejs data binding on img src attribute give 404 error

Question

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)

<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

tao · Accepted Answer · 2022-04-26 02:46:29Z

2

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

should do it.

Documentation here.

answered Apr 26, 2022 at 2:46

tao

91k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Minas-Theodoros Charakopoulos Over a year ago

So, i should use require() everytime when i want to bind the src html attribute?

tao Over a year ago

@minas, yes, that's correct. This is because the files are provided from different places while serving versus the deployed build. vue-loader does a lot of work behind the scenes, but you need to use require().

Collectives™ on Stack Overflow

vuejs data binding on img src attribute give 404 error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related