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

【问题标题】：Side bar image disappearing when page reload Laravel页面重新加载 Laravel 时侧边栏图像消失
【发布时间】：2019-09-04 01:53:48
【问题描述】：

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

【问题讨论】：

您需要提供代码。
@RichardAyotte 完成

标签： php laravel vue.js eloquent

【解决方案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

【讨论】：

是的，这是真的，我才意识到！有什么办法可以克服吗？
我正在开发一个我认为是 PHP 的 laravel 项目。 Vue 可能有一个特殊的函数可以调用，告诉你项目的根路径，我会更新我的答案

【解决方案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 将会是一些。

【讨论】：