WordPress在Sage模板中使用图像

我试图在我的Sage模板文件之一中使用背景图像。

但是, 当我尝试此操作时, 图像未显示。

<section class="banner" style="background-image: url(../images/banner.jpg);">

banner.jpg文件位于theme-name / assets / images / banner.jpg中

我在这里做错了什么？

#1

用下面的代码替换你的代码。你需要在图片文件夹之前添加资产, 因为你提到的图片路径是图片文件夹是资产的子文件夹

<section class="banner" style="background-image: url('../assets/images/banner.jpg');">

使用了get_template_directory_uri()。检索主题目录URI。

<section class="banner" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/banner.jpg');">

如果使用子主题, 则使用get_stylesheet_directory_uri()。它返回当前主题/子主题的URI。

<section class="banner" style="background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/assets/images/banner.jpg');">

#2

请使用wordpress模板目录路径

<section class="banner" style="background-image: url(<?php echo get_template_directory(); ?>/images/banner.jpg);">

#3

尝试这个：

<section class="banner" style="background-image: url(/wp-content/themes/theme-name/assets/banner.jpg);">

或这个：

<section class="banner" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/banner.jpg');">

也许你只是忘记了”资产”：

<section class="banner" style="background-image: url('../assets/images/banner.jpg');">

#4

在header.php中尝试一下：

<section class="banner" style="background-image: url(wp-content/themes/theme-name/dist/images/about-us-top-side.png);">

or

<section class="banner" style="background-image: url(wp-content/themes/theme-name/assets/images/about-us-top-side.png);">

如果正确使用Sage主题, 则第一个图像将具有优化的图像。

#5

先前的答案使用WordPress的一些内置函数来解析当前主题的路径。但是, 在Sage(使用Blade模板)中, 这是通过@asset指令处理的：

<section class="banner" style="background-image: url("@asset('images/example.jpg')");">

文献资料