blocks|key|2334555|text|您的图像仍在引用本地主机。例如，http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg。我建议您使用类似于一个wp迁移中的所有内容来导出您的站点，这样它就可以修复链接或找到修复这些图像链接的方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2334556|entityMap|0|LINK|mutability|MUTABLE|url|https://wordpress.org/plugins/all-in-one-wp-migration/^0|G|23|2V|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Your images are still referencing localhost. for example <code>http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg</code>. I advise you to export your site using something like all in one <a href="https://wordpress.org/plugins/all-in-one-wp-migration/" rel="nofollow noreferrer">wp migration</a>, so that it fixes the links or find a way of fixing these image links.

blocks|key|2334602|text|查看链接到要显示的背景图像的路径的页面，可以看到这个路径：http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg，您可以看到，您仍然在引用您的localhost，这是您的内部see服务器，而不是您现在使用的。如果您移除localhost域，只要图像在正确的路径上，它就应该工作正确。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2334603|entityMap^0|T|23|3B|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Looking at the page you linked the path to the background image you are trying to have show up has this path: <code>http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg</code> You can see you are still referencing your <code>localhost</code> which is your internal webserver and not the one you are using now. If you remove the localhost domain it should work correct provided the image is in the correct path.

blocks|key|981555|text|查看链接到要显示的背景图像的路径的页面，可以看到以下路径：http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|981556|你可以解决它|style|BOLD|981557|步骤1-元素或->工具->替换URL+->+http://localhost/+->+https://wwlandscaping.com+->+替换URL|CODE|981558|步骤2-元素或->工具->通用->重新生成CSS+->+再生文件&+Sync+Library+->+Sync+Library|981559|entityMap|0|LINK|mutability|MUTABLE|url|http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg^0|T|23|0|0|0|6|0|M|H|17|P|20|5|0|S|4|1E|C|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|11|8|@$A|12|B|13|F|J]|$A|14|B|15|F|J]|$A|16|B|17|F|G]]|9|@]|C|$]]|$1|K|3|L|5|6|7|18|8|@$A|19|B|1A|F|G]|$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Looking at the page you linked the path to the background image you are trying to have show up has this path: <a href="http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg" rel="noreferrer">http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg</a>

You can solve it

Step 1 - Elementor -> Tools -> Replace URL -> <code>http://localhost/</code> -> <code>https://wwlandscaping.com</code> -> Replace URL

Step 2 - Elementor -> Tools -> General -> Regenerate CSS -> Regenerate Files &amp; Sync Library -> Sync Library

blocks|key|981580|text|步骤1-元素或->工具->替换URL+->+http://localhost/+->+https://wwlandscaping.com+->替换URL|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|981581|步骤2-元素或->工具->通用->重新生成CSS+->重新生成文件&同步库->同步库|981582|步骤3-转到页面并单击elementor中的编辑页面。选择图像背景并删除图像。|981583|步骤4-单击“更新”。|981584|步骤5-再次上传图像并单击update。|981585|entityMap|0|LINK|mutability|MUTABLE|url|http://localhost/|1|https://wwlandscaping.com/^0|M|H|0|17|P|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]]]

Step 1 - Elementor -> Tools -> Replace URL -> <a href="http://localhost/" rel="nofollow noreferrer">http://localhost/</a> -> <a href="https://wwlandscaping.com" rel="nofollow noreferrer">https://wwlandscaping.com</a> -> Replace URL

Step 2 - Elementor -> Tools -> General -> Regenerate CSS -> Regenerate Files &amp; Sync Library -> Sync Library

Step 3 - go to page and click edit page from elementor. Select image background and remove image.

step 4 - click update.

step 5 - upload image again and click update.

blocks|key|981605|text|请尝试替换您的URL。登录到任何服务器上的Wordpress帐户。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|981606|在仪表板屏幕上，导航到Elementor+->工具。在“常规”选项卡中，重新生成CSS文件。|981607|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Please try to replace your URLs. Log in to your Wordpress account on whichever server it is hosted. 

On your Dashboard screen, navigate to Elementor -> Tools. In General tab, regenerate CSS files.

blocks|key|2334705|text|我也遇到过类似的挑战，要让元素或背景图像加载到本地环境中的设备上，可以使用本地WP和实时链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2334706|我就是这样解决的。元素迁移指南是非常有用的。|offset|length|2334707|根据元素迁移指南：|2334708|背景图像保存在具有绝对URL的CSS文件中。为了避免在不需要编写脚本的情况下迁移背景图像中的问题，可以定义CSS打印方法为内联方法，如果需要，可以使用外部文件。这可以通过进入Elementor+>+Settings+>+Advanced打印方法>内部Embedding>+CSS打印方法:内联，在您的WP仪表板上完成。|blockquote|2334709|这里为我提供了在本地设备上工作的元素或背景图像。我使用本地WP和实时链接进行设备测试：|style|BOLD|2334710|在本地环境中，将本地元素或css打印方法设置为“内部嵌入”(Elementor+>+Settings+>+Advance)|ordered-list-item|2334711|执行url重写(旧环境URL到新环境URL)|2334712|重新生成元素文件(元素>工具>通用)|2334713|在我这样做之后，在我的本地环境中，我的背景图像出现在本地设备中。然后，我做了一个阶段和prod+(包括数据库)，看看背景图像是否仍然可见，他们是。一切正常。|2334714|对于生产-当Elementor的css打印方法设置为"external“时，Elementor引用了性能增强。|2334715|如果您想在prod上执行此操作，在完成设备测试之后，请执行以下步骤：|2334716|在prod环境中，将本地Elementor+css打印方法设置为“外部文件”(Elementor+>+Settings+>+Advance)|2334717|2334718|2334719|我认为这应该可以解决在本地和设备上开发站点时的元素或背景图像难题。如果我错了请告诉我。|2334720|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.elementor.com/article/467-site-migration^0|0|9|6|0|0|0|0|0|17|0|0|0|0|0|0|0|Y|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|F|3|G|5|6|7|1K|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1L|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1M|8|@$D|1N|E|1O|M|N]]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1P|8|@]|9|@]|A|$]]|$1|R|3|S|5|Q|7|1Q|8|@]|9|@]|A|$]]|$1|T|3|U|5|Q|7|1R|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1S|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1T|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1U|8|@$D|1V|E|1W|M|N]]|9|@]|A|$]]|$1|11|3|12|5|Q|7|1X|8|@]|9|@]|A|$]]|$1|13|3|S|5|Q|7|1Y|8|@]|9|@]|A|$]]|$1|14|3|U|5|Q|7|1Z|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|20|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|21|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]]]

I had similar challenges getting Elementor background images to load on devices in local environments using Local WP with live link.

Here's how I solved for it. The <a href="https://docs.elementor.com/article/467-site-migration" rel="nofollow noreferrer">Elementor Migration Guide</a> was super helpful. 

From the elementor migration guide:

<blockquote>
 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.
</blockquote>

Here's what got elementor background images working on local devices for me. I'm using Local WP with live links for device testing:

<ol>
<li>In your local environment set the local Elementor css print method
to "internal embedding" (Elementor > Settings > Advance)</li>
<li>Conduct a url rewrite (old environment URL to new environment URL)</li>
<li>Regenerate Elementor files (Elementor > Tools > General)</li>
</ol>

After I did this, in my local environment, my background images showed up in local devices. I then did a push to staging and prod (database included) to see if the background images were still visible and they were. Everything worked.

For production - Elementor cites performance enhancements when having Elementor's css print method set to "external".

If you want to do this on prod, after you're done with your device testing, follow these steps:

<ol>
<li>In your prod environment set the local Elementor css print method to "external file" (Elementor > Settings > Advance)</li>
<li>Conduct a url rewrite (old environment URL to new environment URL)</li>
<li>Regenerate Elementor files (Elementor > Tools > General)</li>
</ol>

I think this should solve the Elementor background image conundrum when developing sites locally and on devices. Please let me know if I'm wrong here.

blocks|key|145989|text|一个简单的解决办法，因为来自Elementor的工具没有帮助:通过FTP连接到您的网站。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|145990|转到以下文件夹：/wp-content/uploads/elementor/css|offset|length|style|CODE|145991|下载它们并搜索并替换旧的后台URL。|145992|对我来说，我在另一个文件夹中有一些CSS：/wp-content/uploads/ao_ccss|145993|我在那里改变了背景网址，它解决了问题。|145994|entityMap^0|0|8|X|0|0|L|R|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

A simple workaround because the tools from Elementor didn't helped: connect via FTP to your website.
Go to the following folder: <code>/wp-content/uploads/elementor/css</code>
download them and search and replace the old background URLs
For me I had some CSS in another folder: <code>/wp-content/uploads/ao_ccss</code>
I changed the background URLs there and it fixed the problem.

My website is not loading the background images on live version - it just shows the text and a grey screen.

I built the site using Elementor.

<a href="https://wwlandscaping.com/services/garden-decking/" rel="nofollow noreferrer">Here</a> are the pages

(all service pages).

I compressed all images to about 100K so they shouldn't be too big to load. The one one the homepage is 99K and it loads.

Thanks

Background Images Not Loading In Elementor

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我的网站没有加载现场版本的背景图像-它只是显示文本和一个灰色屏幕。我用Elementor建立了这个网站。是页面(所有服务页)。我把所有图像压缩到大约100 K，所以它们不应该太大来加载。其中一个主页是99K并加载。谢谢

问不加载元素的背景图像
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不加载元素的背景图像EN