页面重新加载时边条图像消失

Question

我使用vue路由器在菜单之间导航，并使用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的

更新我的修补程序是在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-路由器，并且当您重新加载页面时，链接发生了更改，我肯定这是您的问题，例如，当您重新加载这个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将是在您重新加载页面后的一些。