I've got a Laravel in hosting company and I get this error:
The requested URL /image.jpeg was not found on this server.
This also happens with some CSS and JS files but not all the files. What could be? In my localhost environment everything works fine. Can it be some CPanel configuration that I'm missing?
Thank you :)
The standard way to do this is use asset() function. For example, I have example1.js file that I want to import/include/use in my application, I have to use the following code.
<script src="{{ asset('example1.js') }}" type="text/javascript"></script>
If you want to load image named exampleimage.jpg, You have to use the following code.
<img src="{{ asset('exampleimage.jpg') }}" />
You have to store images, Javascript, and CSS in public folder.
Let me know if it works. According to your question, this is your answer. Let me know if you have any more questions.
Related
I have a small issue with my current configuration using Laravel for the backend, and Vue in the frontend, while my application is built using Laravel mix (6.0).
I am using the following simple mix configuration:
mix.js("resources/js/app.js", "public/js/app.js")
.vue()
.version()
.extract();
Everything works fine when running npm run watch, and when I launch the production build, I get as expected three files in my public folder (manifest.js, app.js and vendor.js). I included these three files in my app.blade.php file in the following way:
<script src="{{ asset(mix('js/manifest.js')) }}" defer></script>
<script src="{{ asset(mix('js/vendor.js')) }}" defer></script>
<script src="{{ asset(mix('js/app.js')) }}" defer></script>
The mix-manifest.json that comes out looks like this:
{
"/js/app.js": "/js/app.js?id=55e00bb7adfe7cc8d33c",
"/js/vendor.js": "/js/vendor.js?id=3cc2a9d83cabdff07b38",
"/js/manifest.js": "/js/manifest.js?id=7d6950016e73d672d079",
}
Most of the routes are working just fine with such a configuration.
However, the problem I am facing is a generic 404 error that shows up when trying to access particular routes having at least two levels, such as <my_website>/read/<post_id>. In this case, the browser tries to resolve something like <my_website>/read/js/app/1.js which obviously doesn't exist, as it should search for <my_website>/js/app/1.js instead.
Am I missing something obvious here? Is there any way to include a full path in the manifest file to avoid this, and making sure that the browser resolves the correct files? Or any other work around to make this work? Thank you!
You can force a base URL in the browser. This rewrites the URLs for you.
Use the <base> tag
See documentation of the base tag here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
Example:
<base href="https://www.example.com/">
I don't know, how much time I lost looking for solution for this issue. I wanted to use Chart.js in my Laravel project, so I followed instructions described here.
composer require fx3costa/laravelchartjs (runned)
Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class (added in the right place)
npm i chart.js (used to install chart.js)
In my controller and blade I used code from example 1 (Line Chart / Radar Chart)
After that the error appeared: Uncaught ReferenceError: Chart is not defined. Before and after that I was trying different solutions, but always something was wrong and I think this one should work for me. I probably missed something obvious, but very important.
Have you any ideas?
Should I add something to webpack.mix.js or bootstrap.js files after installing with npm?
EDIT:
If I put <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> in my head section of blade, everything is working fine, but I'm using laravel-mix to use a locale file instead of link.
Chart.js must be loaded before content in order to use it in any Controller. I was loading my laravel-mix variables after HTML content (because it includes some big libralies like jQuery etc.), so that's why it couldn't work.
SOLUTION:
At the end of my document I still have my previous script
<script src="{{ asset('js/app.js') }}" ></script>
But now I made a new loadBefore.js file in resources/js directory with one line of code:
require('chart.js/dist/chart.js');
If there will be any reason to put there any other javascript code, it will be easy to put it there.
I also added this file to webpack.mix.js like this:
mix.js('resources/js/loadBefore.js', 'public/js').sourceMaps();
And of course at the end I added this script to the head section in my blade:
<script src="{{ asset('js/loadBefore.js') }}"></script>
Now everything is working and I'm using already existing in my Laravel files chart.js file. I don't know, someone knows an easier solution, so for now I'm accepting my answer, but I'm still open for suggestions.
why you just dont copy the content of
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
in a file at your local, for example: /public/js/chart.js
and load it in head
<script src="{{asset('js/chart.js')}}"></script>
In my Laravel 5.7 site I use Ckeditor together with Laravel-Filemanager. After following all the installation instructions I got it to work fine locally. No problems att all. But I cannot get it to work in my remote web server.
On the remote server I have placed the Laravel app in a subfolder 2 levels down from the webroot.
In my blade template I have this (I have tried using both asset and url helpers in the option urls and both of them works locally):
<script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
<script>
var options = {
filebrowserImageBrowseUrl: "{{ url('/laravel-filemanager?type=Images') }}",
filebrowserImageUploadUrl: "{{ url('/laravel-filemanager/upload?type=Images&_token=') }}"
};
</script>
<script>
CKEDITOR.replace('editor1', options);
</script>
When I want to upload an image in my CKeditor by clicking the Browse server button in my local environment it works as it should and the URL looks like this in Laravel File Manager ('laravel/' being the webroot):
http://laravel/laravel-filemanager?type=Images&CKEditor=editor1&CKEditorFuncNum=0&langCode=sv
When I do the same thing in my remote server the URL looks like this:
http://www.myremoteserver.com/subfolder1/subfolder2/public/laravel-filemanager?type=Images&CKEditor=editor1&CKEditorFuncNum=0&langCode=sv
... and all I get is a 404.
I have tried to clear route, config and site caches. I have also tried to copy the URL above in the remote environment and pasting it a new window without the /public/ part.
Is there anyone out there that can guess what is going on? All help would be greatly appreciated.
please share with me how got the ckeditor to upload files when you click send to server because i have being searching for it for about 2 days now yet no solution.
iam using laravel 5.7
and unisharp laravel-filemanager but no solution was found.
I only saw to add config.filebrowserUploadMethod = 'form';
in the ckeditor congi.js but even after adding that i still didn't get any solution.
every other things seems to be working fine.
please i will be glad to receive your assistance
I finally got it to work. I wiped the web server folder clean and uploaded all files again from the beginning manually instead of doing it by cloning the GIT repo. And then it worked. So I actually am not sure what was wrong.
Anyhow I added this snippet below where I wanted the CKeditor in my blade template:
<textarea id="editor1" name="story" class="form-control">{{ $story }}</textarea>
And this near the bottom of the blade template, just before #endsection.
<script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
<script>
var options = {
filebrowserImageBrowseUrl: "{{ url('/laravel-filemanager?type=Images') }}",
filebrowserImageUploadUrl: "{{ url('/laravel-filemanager/upload?type=Images&_token=') }}"
};
</script>
<script>
CKEDITOR.replace('editor1', options);
</script>
Be sure to publish as per the filemanager instructions:
php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public
And clear caches:
php artisan route:clear
php artisan config:clear
Also check that the vendor folder exists in your public directory with CKeditor and Laravel filemanager folders inside it, otherwise the asset and url helpers will not work. Also check in the dev window (F12 in browser) what your current path is to ckeditor.js.
i always use this to go to the public folder:
src="{{ asset('img/pic.png') }}">
everything works perfect
but now is it not possible because i want to show the avatar picture and
something like this not works
<img src="../../public/uploads/avatars/{{$user->avatar}}">
so ive used this but it doesnt work i dont know how to go to the uploads folder
does anybody know the reason?
thank you!!!
Within the asset() helper, you have missed out the uploads/ folder.
So this should be src="{{ asset('uploads/avatars/' . $user->avatar) }}"
If your uploads folder is in the public folder, there is no need to use the asset() helper. You could just use the following:
<img src="/uploads/avatars/{{$user->avatar}}">
I'm a bit lost here. I'm NOT new to Laravel Mix so this is really confusing.
I have a layout blade file and it looks something like this
<html> ....
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js"></script>
<script src="{{ mix('/js/myjs.js") }}></script>
</body>
</html>
The myjs.js is compiled using Laravel Mix and contains dozen of libraries and all of them compile and work properly.
However if I include this
require('katex'); //so it's above everything else to simulate situation from above, when it's included in the layout file
...
and drop the CDN script from the layout file - the Katex library won't work.
I tried using require('katex/dist/katex.min.js') but still nothing. The katex.min.js file in the library and the one in CDN are the same.
I'm not expert on npm and I only use it to fetch libraries and then merge and minify them in my Laravel app.
Can anyone help me pin point the problem here or point me to what am I doing/getting wrong here?
Shouldn't the
<script src="lib1.js"></script>
<script src="lib2.js"></script>
included in the html, and
require('lib1')
require('lib2')
compiled to
<script src="{{ mix('compiled.js') }}"></script>
produce the same thing?
Thanks!
UPDATE:
I'm using Katex to implement this summernote plugin.
Katex should be installed as:
window.katex = require('katex');