html - Javascript 画像をランダム表示（同じ画像を表示しない）

私のポートフォリオサイトには、私のすべての写真をメイソンリータイプのグリッドで表示するギャラリーがあります。今、それらの写真を一度も重複せずにランダム化したいです！つまり、ギャラリーに同じ画像が表示されないようにしたいのです。

// place your images in this array
var random_images_array = [
  'Laundry_Shoot (1).JPG',
  'Laundry_Shoot (5).JPG',
  'Laundry_Shoot (10).JPG',
  'Laundry_Shoot (28).JPG'
];

function getRandomImage(imgAr, path) {
  path = path || 'images/portfolio/'; // default path here
  var num = Math.floor(Math.random() * imgAr.length);
  var img = imgAr[num];
  var imgStr = '<img src="' + path + img + '" alt = "">';
  document.write(imgStr);
  document.close();
}

<!-- END FILTER BUTTONS -->
<div class="gallery">
  <div class="img filterDiv film portret">
    <script type="text/javascript">
      getRandomImage(random_images_array, 'images/portfolio/')
    </script>
  </div>
  <div class="img filterDiv film portret">
    <script type="text/javascript">
      getRandomImage(random_images_array, 'images/portfolio/')
    </script>
  </div>
  <div class="img filterDiv film portret">
    <script type="text/javascript">
      getRandomImage(random_images_array, 'images/portfolio/')
    </script>
  </div>
</div>
</div>

回答 #1

この関数を使って配列を「シャッフル」することができます:

random_image_array.sort(() => Math.random() - 0.5);
    

回答 #2

以下に示すように、Math.random() と Math.floor() 関数を使用してみることができます。

// stores all img paths
const imgs = [
  // your image paths go here
]

function chooseRandomImg() {
  // picks a random index
  const i = Math.floor(Math.random() * (imgs.length));
  
  // gets the img element from the HTML file
  const imgEle = document.getElementById("img-id");

  // sets the source of the img element to a random path from the imgs array
  imgEle.src = imgs[i];
}

// when the page is loaded, this picks a random img
window.onload = function () {
  chooseRandomImg();
}

あなたのHTMLファイルで、<img/> 要素を作成します。document.getElementById() のIDが <img/> 要素のIDと一致していれば、これが正しく動作するはずです。

<img id="img-id" width="50" height="50"/>

freecodecamp.org に、このようなものと似たもののチュートリアルがありますが、テキスト付きです。