我试图在我的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')");">
文献资料
来源:
https://www.srcmini02.com/66381.html