在HTML中使用Javascript顯示隨機圖片-有解無憂

我有一個隨機顯示圖片 URL 的代碼。我想將隨機顯示的 URL 添加到創建圖片的部分。

如何從 JavaScript 中提取 URL 并在 html 中使用它？Test.jpg 應替換為隨機生成的 URL。

var myimages = [{
  image: "https://cdn.prod.www.manager-magazin.de/images/ca3dd5d1-0001-0004-0000-000000088705_w920_r1.778_fpx42.51_fpy49.99.jpg",
  probability: 0.1
}, {
  image: "https://p6.focus.de/img/fotos/id_40323993/porsche-cayman-heck.jpg?im=Crop=(0,20,1600,800);Resize=(800,400)&impolicy=perceptual&quality=medium&hash=69314e722c29162f49edafd9b16362ceb1a704219e2a128272824e5d8d585019",
  probability: 0.1
}, {
  image: "https://i.auto-bild.de/ir_img/1/7/6/3/5/7/9/Alle-Auto-Neuheiten-2019-1200x800-bbcf8a2e46bd3f1f.jpg",
  probability: 0.25
}, {
  image: "https://cache.pressmailing.net/thumbnail/story_hires/64940fdd-8ec9-4854-98f9-e7f7467414b7/image.jpg",
  probability: 0.55
}];

function getImage() {
  var rand = Math.random();
  var probabilitiy_sum = 0;
  for (var i = 0; i < myimages.length; i  ) {
    probabilitiy_sum  = myimages[i].probability;
    if (rand <= probabilitiy_sum) {
      return myimages[i].image;
    }
  }
  return myimages[myimages.length].image;
}

// Just for testing:
for (var i = 0; i < 1; i  ) {
  document.getElementById("textbox").innerHTML  = getImage()   "<br />";
}

<h2>HTML Image</h2>
<img src="test.jpg" width="460" height="345">
<div id="textbox"></div>

uj5u.com熱心網友回復：

設定src影像標簽的，類似于您當前設定 div 的 innerHTML 的方式：

var myimages = [{
  image: "https://cdn.prod.www.manager-magazin.de/images/ca3dd5d1-0001-0004-0000-000000088705_w920_r1.778_fpx42.51_fpy49.99.jpg",
  probability: 0.1
}, {
  image: "https://p6.focus.de/img/fotos/id_40323993/porsche-cayman-heck.jpg?im=Crop=(0,20,1600,800);Resize=(800,400)&impolicy=perceptual&quality=medium&hash=69314e722c29162f49edafd9b16362ceb1a704219e2a128272824e5d8d585019",
  probability: 0.1
}, {
  image: "https://i.auto-bild.de/ir_img/1/7/6/3/5/7/9/Alle-Auto-Neuheiten-2019-1200x800-bbcf8a2e46bd3f1f.jpg",
  probability: 0.25
}, {
  image: "https://cache.pressmailing.net/thumbnail/story_hires/64940fdd-8ec9-4854-98f9-e7f7467414b7/image.jpg",
  probability: 0.55
}];

function getImage() {
  var rand = Math.random();
  var probabilitiy_sum = 0;
  for (var i = 0; i < myimages.length; i  ) {
    probabilitiy_sum  = myimages[i].probability;
    if (rand <= probabilitiy_sum) {
      return myimages[i].image;
    }
  }
  return myimages[myimages.length].image;
}

// Just for testing:
for (var i = 0; i < 1; i  ) {
  document.getElementById("textbox").innerHTML  = getImage()   "<br />";
  document.getElementById("image").src = getImage()
}

<img id="image" src="test.jpg" width="460" height="345">

<div id="textbox"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/446185.html

標籤：javascript html

上一篇：當輪播滑塊放置在div內時，為什么我的輪播影像會消失（輪播高度為零）？

下一篇：如何使用ARIA使螢屏閱讀器可以訪問互動式翻轉卡片？