Guys, what am I doing wrong when changing the image in Vue.js?

Question

Vue.js

I'm just trying to change the picture on hover. (the first image is rendered), the hover works, but instead of the second image I get " localhost:3000/~/assets/img/chrome_icon-white.svg 404 (Not Found)"

a(href="#" class="_available-a" @mouseover="changeIcon")
          img(src="~/assets/img/chrome_icon-color.svg", 
          alt="chrome icon" 
          ref='icon' 
          width='25')

changeIcon(){
      this.$refs.icon.src = "~/assets/img/chrome_icon-white.svg";
    }

What am I doing wrong?

Answer 1

It will only work like this:

changeIcon(){
      this.$refs.icon.src = require("~/assets/img/chrome_icon-white.svg");
    }

This is how the final path is calculated (relevant during the build)