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 进行设备测试:
- 在您的本地环境中设置本地 Elementor css 打印方法
至 "internal embedding"(Elementor > 设置 > 高级)
- 进行 url 重写(旧环境 URL 到新环境 URL)
- 重新生成 Elementor 文件(Elementor > 工具 > 常规)
在我这样做之后,在我的本地环境中,我的背景图像出现在本地设备中。然后我推动了 staging 和 prod(包括数据库)以查看背景图像是否仍然可见并且它们是。一切正常。
对于生产 - Elementor 引用了将 Elementor 的 css 打印方法设置为 "external".
时的性能增强
如果您想在产品上执行此操作,请在完成设备测试后执行以下步骤:
- 在您的产品环境中,将本地 Elementor css 打印方法设置为 "external file"(Elementor > 设置 > 高级)
- 进行 url 重写(旧环境 URL 到新环境 URL)
- 重新生成 Elementor 文件(Elementor > 工具 > 常规)
我认为这应该可以解决在本地和设备上开发网站时遇到的 Elementor 背景图像难题。如果我在这里错了,请告诉我。
一个简单的解决方法,因为 Elementor 的工具没有帮助:通过 FTP 连接到您的网站。
转到以下文件夹:/wp-content/uploads/elementor/css
下载它们并搜索和替换旧的后台 URL
对我来说,我在另一个文件夹中有一些 CSS:/wp-content/uploads/ao_ccss
我更改了那里的背景 URL,它解决了问题。
我的网站没有在实时版本上加载背景图片 - 它只显示文本和灰色屏幕。
我使用 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 进行设备测试:
- 在您的本地环境中设置本地 Elementor css 打印方法 至 "internal embedding"(Elementor > 设置 > 高级)
- 进行 url 重写(旧环境 URL 到新环境 URL)
- 重新生成 Elementor 文件(Elementor > 工具 > 常规)
在我这样做之后,在我的本地环境中,我的背景图像出现在本地设备中。然后我推动了 staging 和 prod(包括数据库)以查看背景图像是否仍然可见并且它们是。一切正常。
对于生产 - Elementor 引用了将 Elementor 的 css 打印方法设置为 "external".
时的性能增强如果您想在产品上执行此操作,请在完成设备测试后执行以下步骤:
- 在您的产品环境中,将本地 Elementor css 打印方法设置为 "external file"(Elementor > 设置 > 高级)
- 进行 url 重写(旧环境 URL 到新环境 URL)
- 重新生成 Elementor 文件(Elementor > 工具 > 常规)
我认为这应该可以解决在本地和设备上开发网站时遇到的 Elementor 背景图像难题。如果我在这里错了,请告诉我。
一个简单的解决方法,因为 Elementor 的工具没有帮助:通过 FTP 连接到您的网站。
转到以下文件夹:/wp-content/uploads/elementor/css
下载它们并搜索和替换旧的后台 URL
对我来说,我在另一个文件夹中有一些 CSS:/wp-content/uploads/ao_ccss
我更改了那里的背景 URL,它解决了问题。