Vue router not allowing to load files

Допустим есть файл по ссылке http://localhost:8080/assets/img/nav-home.png

Есть код на Vue 3

<li v-for="(route, index) in $router.options.routes" :key="index">
    <router-link :to="route.path">
        <img :src="navIconsPath[index]" alt="">
    </router-link>
</li>

Ссылки отображаются и роутинг работает, но изображения не загружаются (ошибка 404), а происходит перенаправление на главную страницу (т.е. перенаправляет на компонент PageHome.vue)

А вот этот код не мешает загружать изображения

<router-link :to="this.$router.options.routes[0].path"><img src="../assets/img/nav-home.png"></router-link>

Код файла routes.js

import { createRouter, createWebHashHistory } from "vue-router";
import PageHome from './views/PageHome.vue';
import PageTimetable from './views/PageTimetable.vue';
import PageSettings from './views/PageSettings.vue';
import PageAnnouncements from './views/PageAnnouncements.vue';
import PagePerformance from './views/PagePerformance.vue';

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/timetable',
            component: PageTimetable
        },
        {
            path: '/performance',
            component: PagePerformance
        },
        {
            path: '/',
            component: PageHome,
        },
        {
            path: '/announcements',
            component: PageAnnouncements
        },
        {
            path: '/settings',
            component: PageSettings
        }
    ]
});

export default router;