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.
Related
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.
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')
UPDATE:
Turns out it's not only the routing, but any instance of going 'up' a directory.
For example mysite.com/public serves me the correct index.phtml file...
mysite.com/index/testpage DOES serve me the testpage.phtml, but my directory structure is completely screwed and I lose all links to images & Stylesheets etc. I've checked my .htaccess and it's exactly as recommended.
Serious head-scratching time here...
OP:
Hello..
I'm using this method for catching urls and serving up the correct content
$router->addRoute(
'list',
new Zend_Controller_Router_Route('/list', array('controller'=>'index', 'action'=> 'list'))
);
And it works really well, serves up the content from list.phtml...
but, the moment I attempt anything 'up' a directory such as this I lose all my style sheets and other relative scripts.
$router->addRoute(
'listWithUsers',
new Zend_Controller_Router_Route('/list/:users', array('controller'=>'index', 'action'=> 'list'))
);
It's strange because I can access the users variable and echo it to screen, it's just that I lose all scripts and stylesheets whenever a URL contains /
For clarity, I'm able to set actions in the indexController.php to catch URLS and it works, but it seems to serve it as another directory causing me to lose all relative links.
Thanks for any help. Please advise if any specific details would help.
For any kind of MVC app using routes like this, you have to specify absolute path for your resources. This will prevent the issue you have.
For example, if I have a website located at mysite.com/app1 and I have a resource located in lib/jquery-1.2.6.min.js, then a valid path will be /app1/lib/jquery-1.2.6.min.js.
For this I have always used some kind of helper to return the site's base URL in my views.
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/lib/jquery-1.2.6.min.js"></script>
You can use a view helper or a constant.
Ok, so I have a project I'm working on: http://www.d2burke.com/exp/intern/
BaseURL is set to: '/exp/intern/'
.htaccess reroutes to /exp/intern/index.php
I have custom routes set up for
http://www.d2burke.com/exp/intern/questions
-- $route['apply'] = "internship/apply";
http://www.d2burke.com/exp/intern/apply
-- $route['questions'] = "internship/questions";
etc.
When you go to http://www.d2burke.com/exp/intern/internship/questions, all is well and the normal tan background shows up...
When you use one of the custom routes...you get the background image from my main site...? what is the world is going on?
You seem to overwrite the background by loading an extra style sheet in the body content like so
<link rel="stylesheet" href="../../css/style.css" />
The browser interprets this as a relative path to your page path.
In the internship/questions page, this relative page translate to http://www.d2burke.com/exp/css/style.css, which doesn't exists.
The fix would be to use an absolute path like /css/style.css
Note: It's pretty obvious if you use Firebug and check the Net tab
EDIT: Alternatively, open Firebug, click the arrow in the Console tab and enable "Show Network Error". That way any 404 error will appear in your console and come up as an error (great debug feature)
i am new to a php site, only familiar with .net web forms sites.
i can't figure out how routing is working on this php site.
www.oursite.com/suggestions.php is to suggestions.php
www.oursite.com/suggestions also loads the php fine
www.oursite.com/suggestions/ loads the php, but no css is applied
www.oursite.com/suggestions/anything - anything that comes after the '/' is ignored and suggestions is loaded without css. so oursite.com/suggestions////// works, as does oursite.com/suggestions/2/2/2/2/whatever
i have searched but not found any good explanation on how this is working. can someone explain or provide a good resource?
thank you.
This is most certainly done using Mod_Rewrite, an Apache extension. You'll probably find a file called .htaccess in the public root, in which these rewriting rules are defined.
DouweM has the right answer as far as the friendly urls are concerned.
As for the CSS, it is probably because you are using relative URLs in your link tags:
<link rel="stylesheet" href="site.css"/>
Change those to absolute URLs and it should solve that problem:
<link rel="stylesheet" href="/site.css"/>
The reason for this is that the browser makes the request for the CSS based on the directory it thinks it is in, even though your URL rewriting is changing that. So, if the url is http://mysite.com/suggestions/ and you are using relative urls, the browser will request the css as http://mysite.com/suggestions/site.css which of course doesn't exist.
www.oursite.com/suggestions.php is to suggestions.php
www.oursite.com/suggestions also loads the php fine
You probably have a .htaccess file that first checks whether or not a file of that name exists, and if it does serves it, then, if it doesn't, tries to route it to a php script.
www.oursite.com/suggestions/ loads the php, but no css is applied
The / means your browser considers '/suggestions/' a directory. If suggestions.php outputs HTML that contains a relative <link> to a stylesheet, e.g. <link href="style.css">, your browser will request www.oursite.com/suggestions/style.css, rather than www.oursite.com/style.css as in the previous two cases.
www.oursite.com/suggestions/anything
Same as the previous case, your browser will request the wrong css file, since it considers '/suggestions/' a directory. (For a potential fix, take a look at Eric Petroelje's answer.)
As DouweM said, though, your best bet is to look directly at your .htaccess file and figure out what it does.