javascript用于循环设置html页面中的.jpg图像

这是我进入编程领域的开始，我已经和JS合作了好几年了 上学两周。该项目是建立一个地毯网站 商店

本周的作业是写一个表并填充字段 使用for循环访问的数组。阵列必须存储在 单独的JS页面，函数在实际的HTML页面中

以下是我自己的js页面上的阵列：

function getID()
{
  var url = window.location.toString();
  var i = 0;
  if(url.indexOf("?id=")>0)
  {
    var start = url.lastIndexOf("?id=")+ 4;
    i = url.substring(start);
  }
  return i;
}

//array containing names of individual rugs in inventory
var aName = new Array();
aName[0] = "Red/Blue3x5";
aName[1] = "Blue/Yellow5x8";
aName[2] = "VintagePersian7x10";
aName[3] = "Oversize.20x20";

//array containing prices on rug inventory 
var aPrice = new Array();
aPrice[0] = "$299.00";
aPrice[1] = "$700.00";
aPrice[2] = "$2,999.00";
aPrice[3] = "$25,000.00";

//array containing images individual rugs in inventory
var aImage = Array();
aImage[0] = src="red.blue.3x5.jpg";
aImage[1] = src="blue.yellow.5x8.jpg";
aImage[2] = src="vintage.persian.7x10.jpg";
aImage[3] = src="oversize.20x20.jpg";

这是HTML页面表的一段，图像应该出现在这里 在第一列中：

 <tbody>
            <script type="text/javascript">

                //tabel header
                document.write("<table border='1' rules='rows' cellspacing='0'>");
                document.write("<tr>");
                document.write("<th>&nbsp;</th><th>Name</th><th>Price</th><th>Order</th>");
                document.write("</tr>");                

                //loop through aName aray & write results 
                for (var i =0; i < aName.length ; i++) {
                document.write("<tr>");

                //initialize empty array
                var pictures = [];

                //insert place holder
                var image = new Image;

                //set src attribute
                image.src = 'images/' + aImage[i];
                pictures.push(image);

                document.write("<td>");             
                document.write("<image src='aImage[i]' width='50' height='20'" + " />");
                document.write("</td>");
                document.write("<td>" + aName[i] + "</td>");
                document.write("<td>" + aPrice[i] + "</td>");

                //to create hyperlinks for products 
                document.write("<td><span class='link'><a href='#' title='price'>price</a></span>"); 
                }       

            </script>
        </tbody>

//平头
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“名称价格订单”）；
文件。填写（“”）；
//通过aName aray循环并写入结果
for（变量i=0；i

该表将显示适当的列，但 图像应显示一个空白点，调试显示：

“失败了 要加载资源：net:：ERR_FILE_NOT_FOUND“消息

---

它找不到您的图像文件。检查已设置的路径：

src=“picture.jpg”=picture.jpg与当前页面位于同一文件夹中

src=“images/picture.jpg”=picture.jpg位于当前文件夹的images文件夹中

src=“/images/picture.jpg”=picture.jpg位于当前网站根目录下的images文件夹中

---

src=“../picture.jpg”=picture.jpg位于当前文件夹上一层的文件夹中

我对此进行了一些清理并修复了

//表头
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“名称价格订单”）；
文件。填写（“”）；
//通过aName aray循环并写入结果
for（变量i=0；i

这看起来像是输入错误：

var image=new image，您应该执行
var image=newimage（）
您能告诉我们您存储图像的文件夹结构吗？例如，如果要将它们存储在站点根目录下名为“Images”的文件夹中，则相对路径为“/Images/whatever.jpg”。如果您将它们存储在站点根目录下，那么路径将是“/whatever.jpg”。现在你只是说src是“whatever.jpg”，打开浏览器的控制台，检查
src
设置为
img
Tag的值是多少。你在img标签中使用src='images/aImage[i]'。谢谢Johnathan，这很有效。我不得不改变这一行，否则它仍然找不到图像文件：谢谢，Johnathan，行得通。我不得不将这一行分成两个单独的命令，否则它仍然找不到图像文件：document.write（“”）；更改为：--------------------------------------------------------------------------------------document.write（“”）；