I'm trying to view an image in one of my pages. I'm on a latest node-express-vue-nuxt-babel setup. My final goal was:
<img :src="'@/assets/images/projects/' + project.image" width="50px" />
I started with the above, but I got a 404. So I tried with a specific image:
<img src="@/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
and it worked, but going back to dynamic source didn't and:
to <img :src="'@/assets/images/projects/5a2db62e346c1.jpg'" width="50px" />
was enough to produce the 404 again. The 404 was in the console, the page was loading fine with no errors but alas no signs of the image(s). Inspecting the elements made me notice that the dynamic :src became:
<img src="@/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
and the 'static' src became:
<img src="/_nuxt/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
So to make it work I had to renounce to the initial "@" and substitute it with "_nuxt":
<img :src="'_nuxt/assets/images/projects/' + project.image" width="50px" />
Ok, nice, but.. why?