I'm using vue-router to navigate between the menus and doing some request with axios. Whenever the page reloads, the image on the side bar dissapears. I'm not sure what's causing this. Thanks in advance.
BEFORE
AFTER reload
<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>
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
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.
Related
I recently did a fresh install of Lumen framework and started building a site from it. Yes I know lumen is designed only for APIs but please help me out with this.
I have placed all my views inside /resources/views and my templates inside /resources/views/templates.
Now since I had to place [css/js/images] somewhere, I thought placing all of that in public/assets/[css/js/images] would be nice.
Now in my layout when I am trying to include css - I use something like this -
<link href="{{ url('assets/css/something.css') }}">
and it works giving an output of something like this -
<link href="localhost/assets/css/something.css">
same thing works for js also but it gets strange when I try to include images. For including an image I write something like -
<img src ="{{ url('assets/images/someimage.jpg') }}"
and when I view page source, output is as I expect it to be -
<img src="localhost/assets/images/someimage.jpg">
but my console fires 404 not found errors stating someimage.jpg not found. And when I crosscheck by inspecting the image's parent, the Url is totally different soemthing like this -
<img src="localhost/images/someimage.jpg">
See, automatically omitting 'assets' from image url and resulting in 404, but I can see correct url when I view page source.
Things I tried to resolve the issue -
Cleared cache and reloaded the page.
Tried using asset() instead of url() but prototype of that was removed from lumen.
Pull out [css/js/images] folder from assets and pasted them in parent i.e. public. This worked but then the question is why did the previous setup worked find for both css and js and caused problem only with images ?
My other questions are -
1. How can the url in page source be different from the one being rendered ? Just to mention in my case the url in page source worked and displayed image but since the url being renderred omitted 'assets' from path hence resulted in 404.
2. Is there any other good way to include these assets in views. If yes then please also mention where to put them ?
Attaching some images/code for reference.
Output of rendered page showing 404 errors for images but none for css.
Output of view page source windows showing asset included in image path
No clue if this is right, but I believe you actually need to put an image stream inside that URL. Now the server is trying to retrieve some byte encoded object that isn't there.
I have no idea if it's the same case for you, but I've had many instances where I had to put in image streams instead of URLs, which I've solved this way using this library:
Routes.php
/**
* Image handling routes.
* These make sure images actually are images instead of bytecode
*/
Route::get('organization/logo/{logo}', function($logo) {
$file = Image::make(Storage::disk('logo-image')->get($logo));
return $file->response();
});
View
<img src="{{ asset('organization/logo/' . $organization->logo_path) }}" alt="">
I might be completely off, but I recognize what's happening with your app and this took care of the issues when I implemented it.
Check your web server configuration. It sounds like you have some type of redirect setup that redirects assets/images/* to just images/*.
As a simple test, open your "Network" tab and navigate your browser to http://samplelumena.local/assets/images/footer1.jpg. I'm guessing the Network trace will show a 30x (301, 302, etc.) to http://samplelumena.local/images/footer1.jpg, followed by the 404 for that url.
I created a CSS menu, to use on a PHP site, but now I realised that for example:
From the Home tab (URL localhost/site), all the item links are correct if you hover over them, but now i navigate to "Stock" for example, who's URL is localhost/site/stock... it opens correctly. So from Stock i want to navigate to Sales (localhost/site/sales), the URL of sales become localhost/site/stock/sales and not just localhost/site/sales.
I added this menu only recently, the previous one was working fine, so for a test, i replaced the css menu with the previous one, but to no avail. the problem still persist, so I assume that something else must have changed the behaviour of the links...
I can probably fix this by added " ../ " in front of the menu's URL, but on the other hand. not all items are just one step back.
Your help would be greatly appreciated.
Try using absolute URLs.
When your link is on a page located at localhost/site/stock:
Link <!-- goes to localhost/site/stock/sales -->
But if you prepend a forward slash, the destination will be absolute, relative to your document root:
Link <!-- goes to localhost/site/sales -->
Assuming of course that your document root is localhost/site
More likely your links will have to look something like:
Link
You're correct in saying you need to add slashes. My suggestion would be to provide absolute links from / to your page:
/site
/site/sales
/site/sales/sale24
/site/stock
/site/stock/secondstockpage
/site/stock/thirdpage
I have changed the menu as you suggested, but now, it works as follow:
if i for example set my menu link to direct to: /site/sales/sold.php
so the menu.php file link would look like this:
<li>Sales</li>
<ul>
<li>Sold Items</li>
</ul>
it would sometime direct to /site/sales/sold.php and the next moment, it repeats the menu's directory like: /site/sales/sales/sold.php
so i removed the sales directory, as its directing there by itself, worked for a little while and now it directs to /site/sold.php which does not exist so it ends up with a 404.
should i specify a siteroute somewhere else?
this is very weird to me. first time i encounter something like this!
Hope my examples make sense!
This is the hierarchy of my folder and files:
/website
/admin
/about
editAbout.php
adminHeader.php
adminDashboard.php
adminLogout.php
adminHeader.php is the header of my pages, so it is being included in all pages. It also contains the Logout link that has this code:
Logout
In adminDashboard.php page it works, but in editAbout.php page, it didn't work because the link is not right, it becomes
http://www.domainname.com/admin/about/adminLogout.php
I tried to change the link to
<a href="http://www.domainname.com/admin/adminLogout.php">
and also by using the $_SERVER['DOCUMENT_ROOT'] but didn't work also.
Does anyone know how to reset the link to the right one?
you can use ../ to come back to the parent folder
it becomes enter code hereLogout
Try this:
$_SERVER['SERVER_NAME'] . "/admin/adminLogout.php";
The SERVER_NAME value refers to the domain.
You do not need to add the server name, as the browser will put that in for you. So just make all of your paths absolute (from the web browser's point of view):
/admin/adminLogout.php
Example:
<a href="/admin/adminLogout.php">
I have written my own blog let’s say at example.com.
I’ m trying to use footnotes for my posts.
So I have a post at the address:
http://www.example.com/blog/2012/04/post-slug
I use this code for the footnotes (produced by markdown-extra):
<p>That's some text with a footnote.<sup id="fnref:1">1</sup></p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:1">
<p>And that's the footnote. ↩</p>
</li>
</ol>
</div>
This code is saved in the database as the post’s body.
The problem is that when I point to the browser to the post and click the links they point to the home page of my site like this:
http://www.example.com/#fnref:1
and
http://www.example.com/#fn:1
Instead of the correct:
http://www.example.com/blog/2012/04/post-slug#fnref:1
And
http://www.example.com/blog/2012/04/post-slug#fn:1
respectively.
That is they don’t take in mind the part of the URL
/blog/2012/04/post-slug
They "think" they are in the home page for some reason.
In Codeigniter I have chosen not to include index.php in the URL. And of course I have some routing definition in the routes.php file.
I cant’ figure out why this problem occurs. Maybe it has to do with routing.
I have tried all the available options in the config.php file:
$config['uri_protocol'] = 'AUTO';
(PATH_INFO etc) but didn’t help.
Can anyone help?
Thanks in advance.
CI always behaves as it's in the root this because that's where its index.php file is located and all the controllers/methods are called from there.
To solve your case, I'd suggest you add a path to your href attribute, or use base, like Zenbait said.
I'm having problems with the paths to my first wordpress theme. Post images and stuff not related to css is located in wordpress_folder/blog-images/ and in index.php when I link to images I use this path: blog-images/img.jpg
The problem is now that when I want to link to the same image from another file (not index.php) in this case single.php wich displays one blog post, the correct path is now ../../../blog-images/img.jpg
This is causing problems in the includes like sidebar etc. sidebar.php works fine when called from index.php but the images path is changed if sidebar.php is called from single.php.
Does anyone know what's going on?
If you are creating these links from within php scripts, I would suggest using the site_url() function to get the URL for your wordpress install and then appending your images path to the end of that. If you are editing static theme files like css, then you should use /wordpress_folder/blog_images/img.jpg.
Something like <img src="<?php echo site_url() ?>/blog_images/img.jpg" /> should be sufficient from theme files.
The reason that paths are chaning is because if you are in wordpress_folder then the path blog_images/img.jpg resolves to wordpress_folder/blog_images/img.jpg but if you are on a post that has the url yoursite.com/wordpress_folder/2011/09/category/my_great_post then the path would resolve to wordpress_folder/2011/09/category/blog_images/img.jpg which is obviously incorrect.
For this reason you should try to use the absolute path or full URL so that no matter what file/folder/url you are linking from, the path will always be correct.
The main downside you may run into is that if you were to change the name of your wordpress folder, or remove it altogether, then you may need to make a lot of edits to reflect that. But in any case, you should put the / in front of your path so that it can be referenced the same from everywhere.
Also check out the site_url() reference page, it lists some other helpful functions at the bottom that may be useful to you.
I thought this was a little unclear from drew's answer, so I am adding a little bit more in a separate answer. His advice is sound and I agree with him.
If you prepend a url with a / then it will navigate based on your site url. Without the slash it uses relative navigation.
So here are some examples for www.mydomain.com
//always shows the image located at http://www.mydomain.com/myfolder/pic.png
//no matter what the url is
<img src="/myfolder/pic.png" />
//shows the image located relative to the current path
//if current url is http://www.mydomain.com/posts/ then the image will come from
//http://www.mydomain.com/posts/myfolder/pic.png
<img src="myfolder/pic.png" />
If you are creating links dynamically from php side then you will want to use site_url().
If you are creating links to your theme directory folder then you will want to use bloginfo('template_directory')