没有在Elementor中加载背景图片

Question

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

我使用Elementor构建了网站。

Here是页面

（所有服务页面）。

我将所有图像压缩到大约100K，因此它们不应太大以至于无法加载。主页上的一个是99K，它已加载。

谢谢

Answer 1

查看您将路径链接到要显示的背景图像的页面，该路径为：http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg

您可以解决

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

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

Answer 2

在使用带有实时链接的本地WP来将Elementor背景图像加载到本地环境中的设备上时，我遇到了类似的挑战。

这是我解决的方法。 Elementor Migration Guide非常有用。

从elementor迁移指南中：

背景图像保存在具有绝对URL的CSS文件中。 为了避免迁移背景图片问题而不必 编写脚本，您可以将CSS Print Method定义为内联 而不是使用外部文件（如果需要）。这可以通过 转到Elementor>设置>高级> CSS打印方法>内部 在WP仪表板上嵌入> CSS打印方法：内联。

这就是让元素或背景图像在本地设备上运行的原因。我正在使用具有实时链接的本地WP进行设备测试：

1. 在您的本地环境中，设置本地Elementor CSS打印方法 到“内部嵌入”（“元素”>“设置”>“高级”）
2. 进行url重写（从旧环境URL到新环境URL）
3. 重新生成Elementor文件（Elementor>工具>常规）

这样做之后，在本地环境中，我的背景图像显示在本地设备中。然后，我尝试进行暂存和生产（包括数据库），以查看背景图像是否仍然可见。一切正常。

用于生产-Elementor在将Elementor的CSS打印方法设置为“外部”时引用了性能增强功能。

如果要在产品上执行此操作，请在完成设备测试后执行以下步骤：

1. 在产品环境中，将本地Elementor CSS打印方法设置为“外部文件”（Elementor>设置>高级）
2. 进行url重写（从旧环境URL到新环境URL）
3. 重新生成Elementor文件（Elementor>工具>常规）

我认为这应该解决在本地和设备上开发站点时Elementor背景图像难题。如果我错了，请告诉我。

Answer 3

您的图像仍在引用localhost。例如http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg。我建议您使用wp migration中的所有内容来导出网站，以便它修复链接或找到修复这些图像链接的方法。

Answer 4

在您将路径链接到试图显示的背景图像的页面上，找到以下路径：http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg您可以看到您仍在引用localhost这是您的内部Web服务器，并且不是您现在使用的那个。如果您删除了localhost域，则只要图像位于正确的路径中，它就可以正常工作。

Answer 5

第1步-元素->工具->替换URL-> http://localhost/-> https://wwlandscaping.com->替换URL

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

第3步-转到页面，然后从elementor中单击“编辑页面”。选择图像背景并删除图像。

第4步-单击更新。

第5步-再次上传图片，然后点击更新。

Answer 6

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

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

Answer 7

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

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

下载它们并搜索并替换旧的背景网址

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

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