Ребят, что я делаю не так при смене картинки во Vue.js?

Question

[Darkness]

Просто пытаюсь сменить картинку при наводке. (картинка первая отрисовывается), наводка работает, а вот за место второй картинки я получаю "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";
    }

Что я не так делаю?

Comments

[WapSter]

А зачем в пути тильда и слеш?

[Darkness]

Тимур Турсунбаев, не находит он картинки по другому, можно конечно @ , но в nuxt в доке через ~

[Darkness]

Тимур Турсунбаев, да и если убрать, то путь нормальный отображается, но все та же ошибка 404, т.е. найти не может

Answer 1

[#FFFFFF]

Сработает только так:

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

Так вычислится конечный путь (актуальный при билде)

Comments

[Darkness]

Ох, и в правду, почему именно запрос? Из-за того что nuxt на сервере рендер делает?

[#FFFFFF]

Darkness, это не только для nuxt актуально, но и для простого vue, так обрабатываются пути вебпаком, можете тут об этом почитать подробнее

[Darkness]

#FFFFFF, Спасибо большое!