Refer static files directly using ‘@’ in Vue

Why?

References like:

../../../assets/images/home.png

are dependent on the location of the file they are used in. Whenever the file location changes, the relative reference will break. To avoid this, vue has a cool trick!

The Fix

The best way to reference static files in your VUE app is to use the @ symbol at the start of your URL.

<img src="@/assets/images/home.png"/>

Why?

Whenever you’re restructuring your app, it’s nice to keep the references working. This can be achieved when you utilize ‘@’ in your path.

I Hope this helps some of my vue fella’s out there!

Enjoy!