刷新页面上未加载图像徽标

Question

App.vue我有个奇怪的东西， 例如，我有一个路线链接，考虑它是localhost/tools 或这样的路线。将显示图像徽标。

请看这张图片

例如，当我们单击另一条路线时，它将显示出来。但问题是，当我在路由刷新页面时会出现问题，我们认为它是localhost/purchase/order，我会给出gif图像。

很奇怪吗？然后当我做一个检查元素时，它无法加载图像

如果你想看我的代码，这是我的App.vue，

<----- This is for my logo image ----->
<a href="" class="sidebar-toggle">
    <img class="svg" :src="'./dashboard/img/svg/bars.svg'" alt="img">
</a>
<a class="navbar-brand" href="/tools">
    <img class="svg dark" :src="'./dashboard/img/Logo_Dark.png'" alt="logo">
    <img class="light" :src="'./dashboard/img/Logo_white.png'" alt="logo">
</a>

<----- This is for my dynamic user image ----->
<a href="javascript:;" class="nav-item-toggle">
  <img v-bind:src="`./dashboard/img/author/profile/`+user.avatar" alt="User" class="rounded-circle"> {{user.name}}
</a>

这是我的Resources/App.js

import App from './components/App.vue';
const router = new VueRouter({
    mode: 'history',
    routes: routes,
    scrollBehavior(to, from, savedPosition) {
        return {
            x: 0,
            y: 0
        }
    },
    linkActiveClass: 'active'
});
new Vue(Vue.util.extend({
    router,
    vuetify,
    render: function (h) {
        return h(App)
    }
})).$mount("#app");

谁能帮我解决这个问题？ 之前谢谢你。 :)

Answer 1

使用相对路径是错误的。 ./dashboard/img/svg/bars.svg localhost/purchase/order 将尝试从 localhost/purchase/order/dashboard/img/svg/bars.svg 加载图像。这可以在网络选项卡中看到，但未调试。

图片最初是加载的，因为它是在基本 URL 为 localhost/ 时加载的，并且以后没有更改图片 URL。

如果图像位于根目录，则链接应为/dashboard/img/svg/bars.svg