JQuery循环插入图片失效：网页图片无法显示问题求助

1. 优先排查核心的路径问题 #

打开浏览器开发者工具（按F12），切换到Network面板，刷新页面查看图片的请求状态：

• 如果显示404错误，说明路径配置错误：
  • 核对HTML文件位置：若HTML在项目根目录，training_images/class1/frameX.jpg是正确路径；若HTML在子文件夹（比如pages/index.html），路径需改为../training_images/class1/frameX.jpg（添加上级目录跳转符）。
  • 确认图片文件名：检查是否真的是frame0.jpg到frame99.jpg，有没有大小写错误（比如Frame0.jpg），或者实际格式不是jpg（比如png）。

2. 修复代码中的两处问题 #

（1）移除重复的ID #

你给所有图片设置了同一个id="theImg"，但HTML要求ID必须唯一，虽然这不一定直接导致图片不显示，但会引发其他潜在问题。可以直接去掉ID，或者设置动态唯一ID：

// 不需要ID的话直接移除
$('<img>',{src:'training_images/class1/frame' + i + ".jpg"})
// 需要ID的话改成动态唯一值
$('<img>',{id:'frame-img-' + i, src:'training_images/class1/frame' + i + ".jpg"})

（2）确保代码在DOM加载完成后执行 #

如果你的JS代码写在<head>标签里，或者在#class1-images元素之前，浏览器还没渲染出目标元素，代码就找不到它，自然无法插入图片。把代码包裹在$(document).ready()中：

$(document).ready(function(){
  for (var i = 0; i < 100; ++i){                         
     $("#class1-images").prepend($('<img>',{src:'training_images/class1/frame' + i + ".jpg"}));
  }
});

（3）可选：调整图片显示顺序 #

用prepend插入的话，循环结束后frame99会排在最前面，frame0在最后。如果想要按frame0到frame99的顺序显示，把prepend改成append即可。

3. 快速验证路径的小方法 #

如果还是不确定路径是否正确，直接在HTML中写一张测试图片：

<img src="training_images/class1/frame0.jpg" alt="测试图">

如果这张图能显示，说明路径没问题，再回头排查JS代码；如果也不显示，就是路径或图片本身的问题。

内容的提问来源于stack exchange，提问作者Sri Rama Punniya Vallabhar