Javascript 生成具有不同百分比的随机图像

我目前正在从事一个项目，该项目要求我从画廊中生成一定数量（比如说50张）的随机图像，其中一些图像生成的几率比其他图像小。脚本需要快速而优雅

我目前拥有以下HTML：

<div className="item-picture">
  <img class="random-img" src="" />
</div>
<div className="item-picture">
  <img class="random-img" src="" />
</div>
<div className="item-picture">
  <img class="random-img" src="" />
</div>
<div className="item-picture">
  <img class="random-img" src="" />
</div>

然而，这个脚本不允许我生成多个图像，并且我不能设置任何百分比。我是javascript的新手，希望得到一些帮助

我正在使用React.JS构建这个应用程序，还允许使用jQuery

---

提前谢谢

这个代码可以生成50个图像，但是我没有从

%

中得到您想要的：

// use container for HTML tags
<div id="container">
</div>
<script>

    function randomImg(){
        var randomNumber = Math.floor(Math.random() * 4) + 1;
        var imgName = "img_" + randomNumber + ".png";
        for (let i = 1; i < 50; i++) {
            let src = "img" + "/" + imgName ;
            document.getElementById("container").innerHTML += `<img class="random-img" src=${src} />`
        }
    }

</script>

更新：要一次添加所有内容：

function randomImg(){
        let all = []
        let collection = {}
        for (let i = 1; i < 50; i++) {
            var randomNumber = Math.floor(Math.random() * 4) + 1;
            var imgName = "img_" + randomNumber + ".png";
            let src = "img" + "/" + imgName ;
            all.push([src, randomNumber])
            if (!collection[randomNumber]) {
                collection[randomNumber] = 1; // this will be for count the appearances of the img
            } else {
                collection[randomNumber] += 1; 
            }
        }
        for (image of all) {
            src = image[0]
            randomNumber = image[1]
            percent = collection[randomNumber] / 50
            document.getElementById("container").innerHTML += `<img class="random-img" src=${src} /><span> Appeared: ${percent}</span>`
        }
    }

函数randomImg（）{
让所有=[]
让集合={}
for（设i=1；i<50；i++）{
var randomNumber=Math.floor（Math.random（）*4）+1；
var imgName=“img_”+randomNumber+”.png”；
设src=“img”+“/”+imgName；
all.push（[src，randomNumber]）
如果（！集合[randomNumber]）{
集合[randomNumber]=1；//这将用于计算img的外观
}否则{
集合[随机数]+=1；
}
}
为（所有人的形象）{
src=图像[0]
随机数=图像[1]
百分比=集合[随机数]/50
document.getElementById（“容器”）.innerHTML+=`出现：${percent}`
}
}

我想用要显示的特定图像的百分比制作一个数组（我想？）。例如，我输出10个div，其中有2个图像，图像1有70%的几率，那么10个图像中有7个是图像1。这是可行的，但是我希望图像生成并使用一次，现在图像在2秒后更新为其他图像。

function randomImg(){
        let collection = {}
        for (let i = 1; i < 50; i++) {
            var randomNumber = Math.floor(Math.random() * 4) + 1;
            var imgName = "img_" + randomNumber + ".png";
            let src = "img" + "/" + imgName ;
            if (!collection[randomNumber]) {
                collection[randomNumber] = 1; // this will be for count the appearances of the img
            } else {
                collection[randomNumber] += 1; 
            }
            document.getElementById("container").innerHTML += `<img class="random-img" src=${src} /><span class=${randomNumber} ></span>`
        }
        for (randomNumber in collection) {
            percent = collection[randomNumber] / 50
            /*
            document.getElementById("container").innerHTML += ` ${randomNumber} Appeared: ${percent}`
            */
        }
    }

  $(`.${randomNumber}`).map(
                function () {
                    this.innerHTML += ` ${randomNumber} Appeared: ${percent}`
                }
            )

function randomImg(){
        let all = []
        let collection = {}
        for (let i = 1; i < 50; i++) {
            var randomNumber = Math.floor(Math.random() * 4) + 1;
            var imgName = "img_" + randomNumber + ".png";
            let src = "img" + "/" + imgName ;
            all.push([src, randomNumber])
            if (!collection[randomNumber]) {
                collection[randomNumber] = 1; // this will be for count the appearances of the img
            } else {
                collection[randomNumber] += 1; 
            }
        }
        for (image of all) {
            src = image[0]
            randomNumber = image[1]
            percent = collection[randomNumber] / 50
            document.getElementById("container").innerHTML += `<img class="random-img" src=${src} /><span> Appeared: ${percent}</span>`
        }
    }