从数组中获取图像，并使用javascript将其设置为html中类的背景图像

我有一个数组项目有三个项目，我随机选择了两个项目，其中一个拿了标签，显示在

内的两个框中

我希望所选项目的URL显示为相应框的

背景图像

。

，即如果第一个框中显示1，则其背景图像应为1的URL

如何实现它？？图像应该放在盒子里

我必须使用背景图像st方法，但它不起作用

var array2=[]；
可变项目=[{
标签：“1”，
网址：'https://picsum.photos/200/300/?random'
},
{
标签：‘2’，
网址：'https://picsum.photos/200/300/?random'
},
{
标签:"3",，
网址：'https://picsum.photos/200/300/?random'
}
];
array2=items.slice（）；
右值（）；
var项目；
函数rvalue（）{
ptags=document.querySelectorAll（'[name=“values”]'）；
box=document.getElementsByClassName（“box”）；
对于（var指数=0；指数<2；指数++）{
var randomIndex=Math.floor（Math.random（）*array2.length）；
项目=阵列2.拼接（随机索引，1）；
ptags[index].textContent=item[0]。标签；
//框[index]style.backgroundImage=item.url；
ptags[index].dataset.itemIndex=randomIndex；
}
}

.box{
宽度：计算（15.4%-4px）；
显示：内联块；
边界半径：5px；
边框：2倍实心#333；
边框：#000边框颜色：#E600；
保证金：-2px；
背景色：#0F6；
}
.盒子{
高度：15vh；
显示：内联flex；
对齐项目：居中；
调整内容：中心
}
#容器{
空白：nowrap；
文本对齐：居中；
边框：px实心#CC0000；
保证金：2倍；
右边距：2px；
}
.方框p{
字体大小：calc（2vw+10px）；
}
p{
字体：“Courier New”，Courier，monospace；
字体大小：30px；
颜色：#005ce6；
文本对齐：居中；
}
.文本{
填充：20px；
利润率：7像素；
边缘顶部：10px；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
}
身体{
背景尺寸：100vw 100vh；
}

你应该使用

url（link）

而不是

link

像：

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

var array2=[]；
可变项目=[{
标签：“1”，
网址：'https://picsum.photos/200/300/?random'
},
{
标签：‘2’，
网址：'https://picsum.photos/200/300/?random'
},
{
标签:"3",，
网址：'https://picsum.photos/200/300/?random'
}
];
array2=items.slice（）；
右值（）；
var项目；
函数rvalue（）{
ptags=document.querySelectorAll（'[name=“values”]'）；
box=document.getElementsByClassName（“box”）；
对于（var指数=0；指数<2；指数++）{
var randomIndex=Math.floor（Math.random（）*array2.length）；
项目=阵列2.拼接（随机索引，1）；
ptags[index].textContent=item[0]。标签；
框[index].style.backgroundImage='url（'+项[0].url+）'；
ptags[index].dataset.itemIndex=randomIndex；
}
}

.box{
宽度：计算（15.4%-4px）；
边界半径：5px；
边框：2px实心#e600；
保证金：-2px；
显示：内联flex；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
#容器{
空白：nowrap；
文本对齐：居中；
边框：px实心#CC0000；
保证金：2倍；
右边距：2px；
}
.方框p{
字体大小：calc（2vw+10px）；
}
p{
字体：“Courier New”，Courier，monospace；
字体大小：30px；
颜色：#005ce6；
文本对齐：居中；
}
.文本{
填充：20px；
利润率：7像素；
边缘顶部：10px；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
}
身体{
背景尺寸：100vw 100vh；
}

为了使图像适合于框，您可以向

框

类添加一些css规则，并使用

框[index].style.backgroundImage=“url”（“+item[0].url+”）设置背景图像本身


var array2=[]；
可变项目=[{
标签：“1”，
网址：'https://picsum.photos/200/300/?random'
},
{
标签：‘2’，
网址：'https://picsum.photos/200/300/?random'
},
{
标签:"3",，
网址：'https://picsum.photos/200/300/?random'
}
];
array2=items.slice（）；
右值（）；
var项目；
函数rvalue（）{
ptags=document.querySelectorAll（'[name=“values”]'）；
box=document.getElementsByClassName（“box”）；
对于（var指数=0；指数<2；指数++）{
var randomIndex=Math.floor（Math.random（）*array2.length）；
项目=阵列2.拼接（随机索引，1）；
ptags[index].textContent=item[0]。标签；
框[index].style.backgroundImage=“url（“+项[0].url+”）”
ptags[index].dataset.itemIndex=randomIndex；
}
}
.box{
宽度：计算（15.4%-4px）；
高度：15vh；
边界半径：5px；
边框：2倍实心#333；
边框：#000边框颜色：#E600；
显示：内联flex；
对齐项目：居中；
保证金：-2px；
背景色：#0F6；
证明内容：中心；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
#容器{
空白：nowrap；
文本对齐：居中；
边框：px实心#CC0000；
保证金：2倍；
右边距：2px；
}
.方框p{
字体大小：calc（2vw+10px）；
}
p{
字体：“Courier New”，Courier，monospace；
字体大小：30px；
颜色：#005ce6；
文本对齐：居中；
}



它在框上显示url，但我希望图像完全显示在框上，即宽度应等于框宽，高度应等于高度