I uploaded a website on Hostinger but I have problems with my images. The images isn't being displayed. It is working on my local environment but when I deploy it on hostinger the images won;t display, even the slick.js that i am using for my slider also won't load.I am using Laravel/Jetstream and Livewire for views. Does anyone know how to fix this? Thank you.
This is the Error message that I'm getting
error image
This is what I use to get the images
<img src="{{ asset('image/svg/imageName.svg') }}">
This is what I use to get the js files
<script type="text/javascript" src="{{ URL::asset('js/slick.js') }}"></script>
Directory for the image
root > public > image > svg
Directory for the javascripts
root > public > js
Related
I'm successfully running npm run production on my Vue (2.6.14) application, and uploading the resultant "chunked" .js files to the public/dist/ and public/ folders on my production server.
However, when I view the site in Chrome, it tells me that I'm running Vue in development mode.
Is there a switch/variable somewhere that I'm forgetting to change? (The APP_ENV variable in the production server's .env file is set to production.)
Thanks/Tom
A stupid own goal. I had
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
in my app.blade.php instead of
<script type="text/javascript" src="{{ asset('dist/app.js') }}"></script>
and so it was reading the dev version of the app.js file (which shouldn't have been uploaded any way!)
I'll never get those hours back!
so there is this project iam working on..now i want to add a background image at the login page....i have tried to upload the photo on the public/background folder...then in the css file i have created the directory but so far no changes!!
now my project look like below ..i have uploaded an image named backgroung.jpg on background folder but also in public/background and /public_html/vendors/gauge.js/assets then at my css file html {
background_image:url('public/background/background.jpg')} so far no changes
accountant
app
background
bootstrap
build
config
css
customer
database
employee
garage
garragelogo
general_setting
img
js
.
.
.
html {
background_image:url('public/background/background.jpg')}
i expected a lot i guess help please ......
You need to specify your path relatively like this ../../../public/background/background.jpg which ../ is a backward directory
or you can set your background in your html tag like this
<html style="background: {{ asset('background/background.jpg') }}">
hope it helps
Use this code block for setting background image on any page.
<div class="classToDefineBackgroundSetCss" style="background-image: url('{{asset('assets/bg-slider/bg-slider1.jpg')}}');">
<form>
<!-- LOGIN FORM -->
</form>
</div>
I am a newbie and just want to go from route->view for one image.
The image name is Frozen_Ophelia_800x.png
Here is my route:
Route::get('/products', function(){
return view('/pages/product');
});
Here is my product.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1> <img src="public/images/product/Frozen_Ophelia_800x.png"></img></h1>
</body>
</html>
However, when I access either http://localhost:8000/products or http://127.0.0.1:8000/products I just get a tiny little icon in the top left:
I used command line to move the image to that folder from my Desktop in Ubuntu 18.04.
Here is what my project structure looks like with said image displayed:
You can access images form public folder.
(1) pass path with APP_URL
<img src="http://127.0.0.1:8000/images/product/Frozen_Ophelia_800x.png">
(2) pass path without APP_URL
<img src="/images/product/Frozen_Ophelia_800x.png">
Most likely it's an issue with the image URL being determined relative to the current page, so it would be trying to fetch:
http://localhost:8080/products/public/images/product/Frozen_Ophelia_800x.png
You can confirm that by looking at the developer console in the browser, then the network traffic.
If so, you can rewrite the img tag as:
<img src="/public/images/product/Frozen_Ophelia_800x.png">
Adding the / to the start makes the browser look for the image starting at the site root, so:
http://localhost:8080/public/images/product/Frozen_Ophelia_800x.png
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.
I try to load asset JS in tempalte blade:
<script src="{{ asset('js/angular_my.js')}}"></script>
In console Chrome I get JS error:
http://localhost/public/%7B%7B%20asset('js/angular_my.js')%7D%7D
If to show source HTML code I see:
<script src="{{ asset('js/angular_my.js')}}"></script>
In my case, I was missing .blade at the end of the filename in my laravel store directory
Asset looks from Public folder. That is why your file should be in: public/js/ directory. Hope it helps