javascript 创建图像对象数组

Creating an array of image objects

提问by Chestnut Tree

I'm trying to create an array of image objects, but struggling. Each object will hold an image and a caption for the image.

我正在尝试创建一组图像对象，但很挣扎。每个对象将保存一个图像和图像的标题。

The following code works fine when I paste it into Firebug for checking:

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

Example 1

示例 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()

... etc

... 等等

However, I thought the following would make more sense, but it keeps throwing an error and I can't understand why.

但是，我认为以下内容更有意义，但它不断抛出错误，我不明白为什么。

Example 2

示例 2

var imageArray = new Array();

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

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

Can anyone explain what's wrong with the code above? Is the first example I posted, the approach I should use? Many thanks

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

回答by ma?ek

Your best bet is to use a sort of factoryand .pushto the images array.

最好的办法是使用一种工厂和.push图像数组。

Try something like this

尝试这样的事情

// 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);

Output

输出

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

回答by The Alpha

In your first example you have

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

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"} 

In your second example, you have

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

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

Here image01is only a key/string not an objectand image01.srcis making the error because of the .in it, a key name can contain _and space (if quoted, i.r. 'key one'). So, you can use it this way, but I think you can remove the image01 : new Image()and just can create new images when you use this objec, like this fiddle, anyways.

这里image01只是一个键/字符串而不是 anobject并且image01.src由于其中的原因而导致错误.，键名可以包含_和空格（如果引用，则为 ir 'key one'）。所以，你可以这样使用它，但我认为你可以删除image01 : new Image()并且在你使用这个 objec 时可以创建新的图像，就像这个 fiddle 一样。

var imageArray = [];
imageArray[0] = {
    image01 : new Image(),
    src : "my-image-01.png",
    imageCaption : "Image caption for image-01"
};
imageArray[1] = {
    image01 : new Image(),
    src : "my-image-02.png",
    imageCaption : "Image caption for image-02"
};

for(x = 0; x < imageArray.length; x++) {
    console.log(imageArray[x].src);
}

So, console.log(imageArray[0].src);will output my-image-01.png. If you want to use a captionin the image object itself then there is no captionattribute for image object, instead you can use data-captionor altto use later somehow, but using HTML5you can use a caption like this

所以，console.log(imageArray[0].src);会输出my-image-01.png. 如果您想caption在图像对象本身中使用 a则图像对象没有caption属性，您可以使用data-caption或alt稍后以某种方式使用，但是使用HTML5您可以使用这样的标题

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

An example here. Also, as an alternative, you may look at this answerwith example.

这里有一个例子。此外，作为替代方案，您可以通过示例查看此答案。

回答by The Alpha

Go back to the first one. Change the third line

回到第一个。更改第三行

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

回答by Joren

Two issues:

两个问题：

• there's a . instead of a , at image02 in imageArray[1]
• you cannot use a .as attribute name of an object

• 有个 。而不是 , 在 imageArray[1] 中的 image02
• 您不能使用 a.作为对象的属性名称

So the code should look something like this:

所以代码应该是这样的：

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"
}

回答by Simon

First: System.Array class is abstract, you can't istanziate it. [You can use ArrayList from collections]

第一：System.Array 类是抽象的，你不能对它进行抽象。[您可以使用集合中的 ArrayList]

Second: to assign a value within object initializzation you must use "=" and not ":" followed by "," like this: new Image { src = "my-image-01.png", imageCaption = "An image caption" }

第二：要在对象初始化中分配一个值，您必须使用“=”而不是“：”后跟“，”，如下所示： new Image { src = "my-image-01.png", imageCaption = "An image caption" }

your code:

你的代码：

var imageList = new ArrayList();

var imageList = new ArrayList();

        imageList.Add(new Image { src = "my-image-01.png", imageCaption = "An image caption" });
        imageList.Add(new Image { src = "my-image-02.png", imageCaption = "Another image caption" });