Javascript 创建图像对象数组

我正在尝试创建一个图像对象数组，但很困难。每个对象将包含一个图像和图像的标题

当我将以下代码粘贴到Firebug中进行检查时，它可以正常工作：

示例1

var imageArray = new Array();

imageArray[0] = new Image();
console.log(imageArray[0]);  //result is <img>

imageArray[0].src = "my-image-01.png";
console.log(imageArray[0]); // result is <img src="my-image-01.png"/>

imageArray[0] = {imageCaption: "A caption for the image"};  //an object
console.log(imageArray[0].imageCaption) //result is: A caption for the image

imageArray[1] = new Image()

---

有人能解释一下上面的代码有什么问题吗？是我发布的第一个示例，我应该使用的方法吗？非常感谢

回到第一个。换第三行

imageArray[0] = new Image();
imageArray[0].src = "my-image-01.png";
imageArray[0].imageCaption = "A caption for the image";

两个问题：

• 有一个。在imageArray[1]中的image02处，而不是a
• 不能将
  用作对象的属性名称

所以代码应该是这样的：

imageArray[0]= {
    image: new Image(),
    src: "my-image-01.png",  //"SyntaxError: missing : after property id"
    caption: "An image caption"
};

imageArray[1] = {
    image: new Image().
    src: "my-image-02.png",
    caption: "Another image caption"
}

---

您最好的选择是使用一种与图像数组的类型

试试这样的

// Image factory
var createImage = function(src, title) {
  var img   = new Image();
  img.src   = src;
  img.alt   = title;
  img.title = title;
  return img; 
};

// array of images
var images = [];

// push two images to the array
images.push(createImage("foo.jpg", "foo title"));
images.push(createImage("bar.jpg", "bar title"));

// output
console.log(images);

<figure>
    <img src="picture.jpg" alt="An awesome picture">
    <figcaption>Caption for the awesome picture</figcaption>
</figure>

输出

[
  <img src=​"foo.jpg" title=​"foo title" alt="foo title">​, 
  <img src=​"bar.jpg" title=​"bar title" alt="bar title">​
]

[
​, 
​
]

首先：System.Array类是抽象的，不能对其进行分析。[您可以使用集合中的ArrayList]

Second：要在对象初始化中指定值，必须使用“=”而不是“：” 然后是“，”像这样：新图像{src=“my-Image-01.png”，imageCaption=“An Image caption”}

您的代码：

var imageList=newarraylist（）

---

在您的第一个示例中

var imageArray = new Array();
imageArray[0] = new Image(); // an image object
imageArray[0].src = "my-image-01.png"; // src set in image object

// Here you are completely destroying the image object and creating a new object
imageArray[0] = { imageCaption: "A caption for the image" };  //an object
console.log(imageArray[0]); // Object {imageCaption: "A caption for the image"} 

在你的第二个例子中，你有

imageArray[0]= {
    image01: new Image(),
    image01.src: "my-image-01.png",  // <-- this is wrong
    imageCaption: "An image caption"
};

所以，

console.log（imageArray[0].src）

将输出

my-image-01.png

。如果您想在图像对象本身中使用

标题

，则图像对象没有

标题

属性，相反，您可以使用

数据标题

或

alt

以供以后使用，但使用时可以使用如下标题

// Image factory
var createImage = function(src, title) {
  var img   = new Image();
  img.src   = src;
  img.alt   = title;
  img.title = title;
  return img; 
};

// array of images
var images = [];

// push two images to the array
images.push(createImage("foo.jpg", "foo title"));
images.push(createImage("bar.jpg", "bar title"));

// output
console.log(images);

<figure>
    <img src="picture.jpg" alt="An awesome picture">
    <figcaption>Caption for the awesome picture</figcaption>
</figure>

精彩图片的说明

---

安。另外，作为一个替代方案，您可以通过示例来了解。

这个问题是针对JavaScript的。我可能会选择其他解决方案之一，但仍然感谢您的回答。这非常有效-非常感谢。我不熟悉工厂的方法，所以是时候复习一下额外的内容了：-）非常感谢您的详细解释和指出错误发生的地方。现在一切都变得更有意义了。我有三个很好的解决方案，只需要挑一个：-）非常感谢。我没有意识到我可以将.imageCaption附加到数组名以使其工作。现在看起来很简单：-）非常感谢！上面的代码非常有效。每个人都给出了这么好的答案，我觉得我被宠坏了@如果这是你认为最有用的答案，你可以点击投票计数器下的复选标记来接受它。

<figure>
    <img src="picture.jpg" alt="An awesome picture">
    <figcaption>Caption for the awesome picture</figcaption>
</figure>