在 laravel 5 中添加背景图片

Posted 2023-02-24

【中文标题】在 laravel 5 中添加背景图片

【英文标题】：add background image in laravel 5

【发布时间】：2017-05-10 11:33:37

【问题描述】：

我正在尝试在 Laravel 5 中为我的网站添加背景图片。

我在我的 css 文件中使用了这个。

html 
        background-image: url("images/background.jpg");
    

图像位于我的 Laravel 项目文件夹的公共文件夹中。我尝试了所有路径，但无法加载。

我不断收到此错误：

http://Laravelproject.app:8000/background.jpg 404 (Not Found)

任何帮助将不胜感激。谢谢。

【问题讨论】：

尝试在开头添加/并检查文件权限background-image: url("/images/background.jpg");

我试过了，我没有收到任何错误，但我仍然看不到背景图片...

在浏览器中运行http://Laravelproject.app:8000/images/background.jpg。看到图片了吗？

我得到 notfoundHttpExtention 错误...

这张图片是否在public/images 目录中？如果是，您的网络服务器似乎配置不正确。

【参考方案1】：

使用斜线效果很好：

html 
    background: url("/images/background.jpg");

【讨论】：

那一定是文件权限不足……还有正常的css是什么意思？？

在 Laravel 5.7 工作文件上，即使 phpStorm 抱怨

【参考方案2】：

试试这个代码 sn-p，这个对我有用：

url( URL::asset('images/SampleBackground.jpg'))

【参考方案3】：

可能会回答有点晚，但这样做并希望它可以帮助那里的人：

background-image:url(url('images/php_mysql.jpg'))

【讨论】：

它适用于 html： 但是如果你将 -- background-image:url(url('images/php_mysql.jpg')) -- 添加到 example.css 文件中会显示错误，只是给你一个提示。

【参考方案4】：

因为你在 css 中，所以你需要先使用两个点来摆脱它。 url("../images/background.jpg");

【参考方案5】：

你必须先通过添加两个点来摆脱 CSS。在这里，我将向您展示一个示例，我刚刚在 Laravel 5.7 中测试并运行良好

在您的 CSS 中创建新类并将其命名为登录正文。

您的 css 代码应如下所示。

.loginbody 

    background-image: url("../images/bg.jpg");

将此类添加到您想要图像的页面的正文中。

保存并运行。

注意：小心你的路径，其中存在图像。在我的情况下，图像位于“public/assets/images/bg.jpg”

【参考方案6】：

你可以使用特定类/id的这个css：

selector
    background-image: url(URL('/')/public/assets/landing/images/paper.jpg);

URL('/') 表示您的项目位置的基本网址

【参考方案7】：

我用

background-image: asset("/images/background.jpg");

我的图片在public/images

【参考方案8】：

请修改如下，

html
 background-image: url(' asset('images/job.jpg') ');

【参考方案9】：

这行得通

   background-image: url(asset('images/bg.jpg'));

【参考方案10】：

我仍然无法在 Laravel 6 中通过 css 访问图像

但是

这段代码对我有用

(在blade.php文件中添加图片路径)

<div id="loading" style="background-image: url(' asset('img/big-loader.gif')');">

【参考方案11】：

在 CSS 文件中，这对我有用：

background-image: url("../images/frontend_images/tempimages/hero.jpg");

【参考方案12】：

简单的添加上面的格式代码：-

url(url('assets/images/slider/swiper/3.jpg'))