如何根据 url 动态更改背景图像答案

【问题标题】：How to change background image dynamically depending on the url如何根据 url 动态更改背景图像
【发布时间】：2016-09-07 12:11:50
【问题描述】：

我正在尝试在页面加载时动态更改背景，具体取决于您所在的 URL。但这对我不起作用。

var camera1 = "url1";
var camera2 = "url2";
var camera3 = "url3";
var currenturl = window.location;
jQuery(function($)
{
  if(camera1 == currenturl) 
  {
    $(".breadcrumb-right").css("background", "url(url1.jpg)   !important;");
  }    
  else if (camera2 == currenturl) 
  {
    $(".breadcrumb-right").css("background-image", "url(url2.jpg)");
  }    
  else if (camera3 == currenturl) 
  { 
    $(".breadcrumb-right").css("background-image", "url(url3.jpg)");
  }    
});

【问题讨论】：

尽可能创建 js fiddle...

标签： javascript css url background

【解决方案1】：

也许您可以通过以下方式改进您的代码：

const cameras = ['url1', 'url2', 'url3'];
const currentUrl = window.location.href;
const el = $(".breadcrumb-right");

if (cameras.includes(currentUrl)) {
  el.css("background-image", `url(${currentUrl})`);
}

【讨论】：

谢谢。它对我有用，但我必须编辑，创建相机 1 相机 2 和相机 3。否则它会为每个房间设置相同的背景......

【解决方案2】：

小心 window.location 不会返回字符串。而是尝试使用
window.location.href 获取完整网址（例如此页面“How to change background image dynamically depending on the url”）

或

window.location.pathname 仅用于路径（例如此页面“/questions/39369642/how-to-change-background-image-dinamycally-depend-on-url”）

【讨论】：