Question

我有一个包含三个项目的数组项目，我随机选择了2个项目，其中一个带有标签并显示在<p>内的2个框中。

i want the URL of the selected item to be displayed as 背景图片 of the corresponding box.，即，如果在第一个框中显示1，则其背景图片应为URL 1。

如何实现？图像应适合盒子内。

我必须使用background-image st方法，但是它不起作用

var array2 = [];
var items = [{
    label: '1',
    url: 'https://picsum.photos/200/300/?random'
  },
  {
    label: '2',
    url: 'https://picsum.photos/200/300/?random'
  },
  {
    label: '3',
    url: 'https://picsum.photos/200/300/?random'
  }
];

array2 = items.slice();
rvalue();

var item;

function rvalue() {
  ptags = document.querySelectorAll('[name="values"]');
  boxes = document.getElementsByClassName("box");

  for (var index = 0; index < 2; index++) {
    var randomIndex = Math.floor(Math.random() * array2.length);
    item = array2.splice(randomIndex, 1);

    ptags[index].textContent = item[0].label;
    //boxes[index]style.backgroundImage = item.url; 

    ptags[index].dataset.itemIndex = randomIndex;
  }

}

.box {
  width: calc(15.4% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  background-color: #0F6;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

#container {
  white-space: nowrap;
  text-align: center;
  border: px solid #CC0000;
  margin: 2px;
  margin-right: 2px;
}

.box p {
  font-size: calc(2vw + 10px);
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 30px;
  color: #005ce6;
  text-align: center;
}

.text {
  padding: 20px;
  margin: 7 px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}

body {
  background-size: 100vw 100vh;
}

<div id="container">

  <div class="box" id="10">
    <p name="values"></p>
  </div>
  <div class="box" id="11">
    <p name="values"></p>
  </div>


</div>

Answer 1

您应该像这样使用url(link)而不是link：

boxes[index].style.backgroundImage = 'url('+item[0].url+')';

var array2 = [];
var items = [{
    label: '1',
    url: 'https://picsum.photos/200/300/?random'
  },
  {
    label: '2',
    url: 'https://picsum.photos/200/300/?random'
  },
  {
    label: '3',
    url: 'https://picsum.photos/200/300/?random'
  }
];

array2 = items.slice();
rvalue();

var item;

function rvalue() {
  ptags = document.querySelectorAll('[name="values"]');
  boxes = document.getElementsByClassName("box");

  for (var index = 0; index < 2; index++) {
    var randomIndex = Math.floor(Math.random() * array2.length);
    item = array2.splice(randomIndex, 1);

    ptags[index].textContent = item[0].label;
    boxes[index].style.backgroundImage = 'url(' + item[0].url + ')';

    ptags[index].dataset.itemIndex = randomIndex;
  }

}

.box {
  width: calc(15.4% - 4px);
  border-radius: 5px;
  border: 2px solid #e6e600;
  margin: -2px;
  display: inline-flex;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#container {
  white-space: nowrap;
  text-align: center;
  border: px solid #CC0000;
  margin: 2px;
  margin-right: 2px;
}

.box p {
  font-size: calc(2vw + 10px);
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 30px;
  color: #005ce6;
  text-align: center;
}

.text {
  padding: 20px;
  margin: 7 px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}

body {
  background-size: 100vw 100vh;
}

<div id="container">

  <div class="box" id="10">
    <p name="values"></p>
  </div>
  <div class="box" id="11">
    <p name="values"></p>
  </div>


</div>

Answer 2

为了使图像适合该框，您可以向box类添加一些css规则，并使用boxes[index].style.backgroundImage = "url("+ item[0].url +")"设置背景图像本身。

var array2 = [];
var items = [{
    label: '1',
    url: 'https://picsum.photos/200/300/?random'
  },
  {
    label: '2',
    url: 'https://picsum.photos/200/300/?random'
  },
  {
    label: '3',
    url: 'https://picsum.photos/200/300/?random'
  }
];

array2 = items.slice();
rvalue();

var item;

function rvalue() {
  ptags = document.querySelectorAll('[name="values"]');
  boxes = document.getElementsByClassName("box");

  for (var index = 0; index < 2; index++) {
    var randomIndex = Math.floor(Math.random() * array2.length);
    item = array2.splice(randomIndex, 1);

    ptags[index].textContent = item[0].label;
    boxes[index].style.backgroundImage = "url("+ item[0].url +")"

    ptags[index].dataset.itemIndex = randomIndex;
  }

}

.box {
  width: calc(15.4% - 4px);
  height: 15vh;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  display: inline-flex;
  align-items: center;
  margin: -2px;
  background-color: #0F6;
  justify-content: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#container {
  white-space: nowrap;
  text-align: center;
  border: px solid #CC0000;
  margin: 2px;
  margin-right: 2px;
}

.box p {
  font-size: calc(2vw + 10px);
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 30px;
  color: #005ce6;
  text-align: center;
}

<div id="container">

  <div class="box" id="10">
    <p name="values"></p>
  </div>
  <div class="box" id="11">
    <p name="values"></p>
  </div>


</div>

从数组中获取图像并使用javascript设置为html类的backgroundimage

2 个答案: