Question

我正在使用vue-router在菜单之间导航，并使用axios进行一些请求。每当重新加载页面时，侧栏上的图像就会消失。我不确定是什么原因造成的。预先感谢。

之前

重新加载后

<aside class="main-sidebar elevation-4" style="background-color:#F4F6F9"> 
<a href="#" class="brand-link">
  <img src="./img/logo.png"  class="brand-image img-thumbnail elevation-3">
  <img src="./img/uthm.png"  class="brand-image img-thumbnail elevation-3">
       <br>
</a> 
</aside>

Answer 1

您的重新加载可能会使您更深入自己的网站，并且指向图像的链接现在变得无效。

例如

http://www.example.com/page1

# Works fine so far
../path/to/image.jpg

重新加载：

http://www.example.com/page1/page2

# Your image link now needs to revert back one level
../../path/to/image.jpg

我有一个类似的问题，我的索引页工作正常，但是一旦我进入其中的目录时，我意识到我需要一种更好的方式来分配img src了。

更新我的解决方法是在laravel中使用内置命令，该命令提供了文件的根路径。您可能必须查找Vue是否具有类似的功能，无论您身在何处，都始终将其始终定向到根文件夹。

一个快速的解决方法是提供完整的目录路径

# instead of the relative path
../path/to/image.com

# Try
http://example.com/root/path/to/image.jpg

# or if offline

http://127.0.0.1/root/path/to/image.jpg

Answer 2

能否请您提供更多详细信息。我将建议您参加此操作，如果您使用的是vue-router，并且当您重新加载页面时，链接是否已更改，我确定这是您的问题例如，当您重新加载此URL（https://127.0.0.1/test/）时，它将是（https://127.0.0.1/test/#/）加载图片的路径将更改，因此您需要在此配置app.js路径（resources \ assets \ js），并且您需要将此行添加到路由中。

const router = new VueRouter({
    mode:'history',
  routes 

})

如果这样做，则在重新加载页面后，URL将是其中的一部分。

页面重新加载Laravel时侧栏图像消失

2 个答案: