使用JavaScript从数组随机显示图片问题排查

你的代码里有两个关键问题导致图片不显示，还有几个可以优化的地方，具体如下：

• 背景图格式错误
  设置CSS背景图时，必须用url()包裹图片路径，原代码直接写路径字符串，浏览器无法识别为图片资源。正确写法应该把路径放在url()里。

• 页面加载事件绑定错误
  window.onload = display_pic();这行代码会立即执行display_pic函数，而不是等页面加载完成后再执行。应该赋值函数本身，去掉括号，让页面加载完成后自动调用。

• 额外优化建议
  可以给背景图加上no-repeat避免重复显示，同时设置background-size让图片适配容器（比如cover或contain），提升显示效果；另外要确认./assets/xxx.png的相对路径是否正确，确保assets文件夹和当前HTML文件的层级关系匹配。

修复后的完整代码：

function display_pic() {
  var arr_images = [
    './assets/arb_01.png',
    './assets/arb_02.png',
    './assets/arb_03.png'
  ];

  var index = Math.floor(Math.random() * arr_images.length);

  $('.random_image').css({
    'background': 'url(' + arr_images[index] + ') no-repeat',
    'background-position': '100%',
    'background-size': 'cover' // 根据需求调整为contain等
  });
}

window.onload = display_pic; // 去掉括号，绑定函数引用

内容的提问来源于stack exchange，提问作者fbb