Elementor 中未加载背景图像

Background Images Not Loading In Elementor

我的网站没有在实时版本上加载背景图片 - 它只显示文本和灰色屏幕。

我使用 Elementor 构建了网站。

Here 是页面

(所有服务页面)。

我将所有图像压缩到大约 100K,因此它们不会太大而无法加载。那个主页是99K,它加载了。

谢谢

您的图像仍在引用本地主机。例如 http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg。我建议您使用类似 all in one wp migration 的方式导出您的网站,以便修复链接或找到修复这些图像链接的方法。

查看您将路径链接到您试图显示的背景图片的页面有这个路径:http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg您可以看到您仍在引用您的 localhost 这是您的内部网络服务器,而不是您现在使用的服务器。如果您删除 localhost 域,只要图像位于正确的路径中,它应该可以正常工作。

查看您将路径链接到您试图显示的背景图片的页面具有以下路径:http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg

你可以解决

步骤 1 - Elementor -> 工具 -> 替换 URL -> http://localhost/ -> https://wwlandscaping.com -> 替换 URL

步骤 2 - Elementor -> 工具 -> 常规 -> 重新生成 CSS -> 重新生成文件 & 同步库 -> 同步库

步骤 1 - Elementor -> 工具 -> 替换 URL -> http://localhost/ -> https://wwlandscaping.com -> 替换 URL

步骤 2 - Elementor -> 工具 -> 常规 -> 重新生成 CSS -> 重新生成文件和同步库 -> 同步库

第 3 步 - 转到页面并单击来自 elementor 的编辑页面。 Select 图片背景并移除图片。

第 4 步 - 单击更新。

第 5 步 - 再次上传图片并点击更新。

请尝试替换您的网址。在托管的任何服务器上登录您的 Wordpress 帐户。

在您的仪表板屏幕上,导航到 Elementor -> 工具。在“常规”选项卡中,重新生成 CSS 个文件。

我遇到了类似的挑战,让 Elementor 背景图像加载到本地环境中的设备上,使用 Local WP with live link。

我是这样解决的。 Elementor Migration Guide 非常有帮助。

来自 elementor 迁移指南:

Background images are saved in a CSS file which has an absolute URL. To avoid migrating issues with the background images without having to write a script, you can define the CSS Print Method to be inline instead of using external files, if you want. This can be done by going to Elementor > Settings > Advanced > CSS Print Method > Internal Embedding> CSS print method: inline, on your WP dashboard.

以下是让 elementor 背景图片在我的本地设备上工作的原因。我正在使用带有实时 links 的本地 WP 进行设备测试:

  1. 在您的本地环境中设置本地 Elementor css 打印方法 至 "internal embedding"(Elementor > 设置 > 高级)
  2. 进行 url 重写(旧环境 URL 到新环境 URL)
  3. 重新生成 Elementor 文件(Elementor > 工具 > 常规)

在我这样做之后,在我的本地环境中,我的背景图像出现在本地设备中。然后我推动了 staging 和 prod(包括数据库)以查看背景图像是否仍然可见并且它们是。一切正常。

对于生产 - Elementor 引用了将 Elementor 的 css 打印方法设置为 "external".

时的性能增强

如果您想在产品上执行此操作,请在完成设备测试后执行以下步骤:

  1. 在您的产品环境中,将本地 Elementor css 打印方法设置为 "external file"(Elementor > 设置 > 高级)
  2. 进行 url 重写(旧环境 URL 到新环境 URL)
  3. 重新生成 Elementor 文件(Elementor > 工具 > 常规)

我认为这应该可以解决在本地和设备上开发网站时遇到的 Elementor 背景图像难题。如果我在这里错了,请告诉我。

一个简单的解决方法,因为 Elementor 的工具没有帮助:通过 FTP 连接到您的网站。

转到以下文件夹:/wp-content/uploads/elementor/css

下载它们并搜索和替换旧的后台 URL

对我来说,我在另一个文件夹中有一些 CSS:/wp-content/uploads/ao_ccss

我更改了那里的背景 URL,它解决了问题。