[Vuejs]-Side bar image disappearing when page reload Laravel

by

0👍

Your reload may possibly take you a level deeper into your site and your links to you images are now becoming invalid.

eg.

http://www.example.com/page1

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

on reload:

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

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

I had a similar issue, where my index page worked fine but as soon as I went a directory in it freaked out, I realised I needed a better way to assign img src’s

Update
My fix was to use an inbuilt command in laravel that gave the root path to the file. You might have to find if Vue has a similar function to direct always to the root folder no matter where you are.

A quick fix is to give the full directory path

# 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

0👍

Can you please give us more details .
I will participate in this with my sugestion , if you are using vue-router and when you reload the page ,did the link change , i know for sure that is your problem
As an example , when your reload this url (https://127.0.0.1/test/) , it will be (https://127.0.0.1/test/#/) the path that you are loading your pictures from will change , so you need to configure your app.js in this path (resources\assets\js) , and you need to add this line to your route .

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

})

if you do so , the url will be the some after you reload your page.

Leave a comment