Web页面随机图片展示教程：从数组中动态选择并加载图片

// 定义一个包含图片URL的数组
const images = [
  'https://picsum.photos/id/9/5000/3269',
  'https://picsum.photos/id/11/2500/1667',
  'https://picsum.photos/id/21/3008/2008'
];

// 生成一个随机索引
// Math.random() 返回一个0（包含）到1（不包含）之间的浮点数
// 乘以数组长度后，得到一个0到数组长度-1之间的浮点数
// Math.floor() 将其向下取整，得到一个有效的整数索引
const randomIndex = Math.floor(Math.random() * images.length);

// 根据随机索引获取对应的图片URL
const randomImageUrl = images[randomIndex];

console.log('随机索引:', randomIndex);
console.log('随机图片URL:', randomImageUrl);

// 假设已执行上述随机图片选择逻辑，并得到了 randomImageUrl

// 方法一：动态创建并添加图片元素
const imgElement = document.createElement('img');
imgElement.src = randomImageUrl;
imgElement.alt = '随机图片'; // 添加alt属性以提高可访问性
imgElement.style.width = '100vw'; // 示例样式：图片宽度占满视口宽度
document.body.appendChild(imgElement); // 将图片添加到body元素中

/*
// 方法二：修改现有图片元素的src属性
// 假设HTML中已有一个ID为 'bannerImage' 的图片元素
// <img id="bannerImage" src="" alt="随机图片横幅">
// const existingImg = document.getElementById('bannerImage');
// if (existingImg) {
//   existingImg.src = randomImageUrl;
//   existingImg.alt = '随机图片横幅';
// }
*/

// app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  images: string[] = [
    'https://picsum.photos/id/9/5000/3269',
    'https://picsum.photos/id/11/2500/1667',
    'https://picsum.photos/id/21/3008/2008'
  ];
  randomImageUrl: string = '';

  ngOnInit(): void {
    this.selectRandomImage();
  }

  selectRandomImage(): void {
    const randomIndex = Math.floor(Math.random() * this.images.length);
    this.randomImageUrl = this.images[randomIndex];
  }
}

<!-- app.component.html -->
<div class="banner-container">
  <img [src]="randomImageUrl" alt="随机横幅图片" class="banner-image">
</div>