laravel localhost / public / index.php不显示背景图像和svgs，但“ php artisan服务”显示它们

Question

I have a small beautiful laravel project on my pc.

On the welcome.blade.php file, it has a background image. And the image is located on

public/images/

directory.

I have used this following CSS to call and represent them:

html, body {
color: #f4f6f7;
font-family: 'Nunito', sans-serif;
font-weight: 500;
height: 100vh;
margin: 0;

background-image: url('/images/back.png');
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size: cover;
}

This project contains a favicon icon too, and this is located as per laravel designed.

The problem is:

When I go to localhost/got/public/index.php form my chrome

it loads my project but can not show or load background image or favicon icon.

But when I run php artisan serve it runs well with no problem.

What is the things i am missing?

Answer 1

please use this :

background-image: url('{{ asset('images/back.png') }}');
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size: cover;
}

Answer 2

Try to add following code to your webpack.mix.js

.options({ processCssUrls: false, })

Answer 3

Your path differ when you use localhost/got/public/ . Try make a virtual host for your project.

Well, here's the WHY part. When you use artisan serve, the image path (that is RELATIVE: /images/back.png) refers to http://localhost:8000/images/back.png . And when you use your local server the images refers to http://localhost/images/back.png again BUT your address is localhost/got/public/images/back.png .

Answer 4

加载头文件（包括.css文件）时，请使用{{ asset("filesurl") }}