jQuery：将背景图像添加到div

Question

我尝试使用jquery将背景图像源添加到div。

图像路径存储在从输入字段获取值的变量中。因此，如果用户输入输入字段img/my-image.jpg，那么我将背景图像样式添加到div中

var imgSource = $("input").val();

$("div").css("background-image","url("+ imgSource +")");

问题在于，而不是像用户输入的那样完全显示图像源，它就像这样http://localhost/website/img/my-image.jpg

因此，如果用户键入图片路径img/mountain.jpg，而不是像这样添加源，则会改为添加，就像这样。

http://localhost/website/img/mountain.jpg

如何让用户输入的背景图片路径完全是添加的，而不是从localhost开始？

Answer 1

您需要为图像编写正确的URI。仅当您确定图像所在的位置以及调用图像的位置时，才建议使用图像的相对路径。

此外，您可以在PHP中获取基本网址：

<?php echo dirname($_SERVER["REQUEST_URI"]); ?>

在大多数框架（和语言）中，提供了这种功能。

在javascript中，您可以使用以下代码：

var base_url = window.location.origin;

然后用imgSource连接：

var imgSource = $("input").val();
var base_url = window.location.origin;

$("div").css("background-image","url("+ base_url .'/'.imgSource +")");