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

Posted 2021-03-27

我正在使用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>

答案

您的重新加载可能会让您更深入到您的网站，您的图片链接现在变得无效。

例如。

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

另一答案

你能告诉我们更多细节吗？如果你正在使用vue-router，当你重新加载页面时，我会参与这个，当你重新加载页面时，链接发生了变化，我知道这是你的问题。例如，当你重新加载这个网址（https://127.0.0.1/test/）时，它将（https://127.0.0.1/test/#/）您正在加载图片的路径将更改，因此您需要在此路径中配置您的app.js（resources assets js），并且您需要将此行添加到您的路线中。

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

})

如果您这样做，则在您重新加载页面后，该网址将成为一些网址。