背景图像不起作用（将非本地转换为本地）

Question

代码：

style="background-image: url(wp-content/uploads/2018/03/example.jpg);"

这样做时图像是可见的，但这就是我问这个问题的全部原因。

style="background-image: url(http://foo.com/wp-content/uploads/2018/03/example.jpg);"

wp-content 是路径中的第一个文件夹。

我试过了：

style="background-image: url('wp-content/uploads/2018/03/example.jpg');"

style="background-image: url(/wp-content/uploads/2018/03/example.jpg);"

style="background-image: url('../wp-content/uploads/2018/03/example.jpg');"

那么问题来了，为什么路径正确时图像不显示？

解决方案实施：

style="background-image: url(insert_your_localhost/wp-content/uploads/2018/03/example.jpg);"

Answer 1

路径不正确。

试试这个：

style="background-image: url('../wp-content/uploads/2018/03/example.jpg');"

Answer 2

解决方案是使用站点 URL 函数调用图像 URL，例如 wp_upload_dir、site_url、content_url Veysel Xankisiyev已经提交了解决方案。

根据您的示例，我试图解释您尝试的每种方法有什么问题。

url('wp-content/uploads/2018/03/example.jpg')

在这种情况下，浏览器会将此图像 URL 与您当前的 URL 相关联。如果您在主页上，请考虑 example.com，生成的图像 URL 将是 example.com/wp-content/uploads/2018/03/example.jpg。 只要您是一个主页，这将起作用，考虑如果您在其他页面 example.com/about/，则生成的图像 URL 将是 example.com/about/wp-content/uploads/2018/03/example.jpg。这是错误的。

background-image: url(/wp-content/uploads/2018/03/example.jpg);

在这种情况下，它将始终相对于域/主机处理 url。即使您是一个主页或其他页面，生成的图像 url 也会是 example.com/wp-content/uploads/2018/03/example.jpg。 但是正如您所说，它在您的情况下不起作用意味着您的 WordPress url 路径将类似于 localhost/wordpress/ 或 example.com/wordpress 左右。在这种情况下，生成的图像 URL 将是 localhost/wp-content/uploads/2018/03/example.jpg ，这是错误的。