创建图像对象数组

Question

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

当我将以下代码粘贴到 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()

...等

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

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

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

Answer 1

回到第一个。改第三行

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

Answer 2

两个问题：

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

所以代码应该是这样的：

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

Answer 3

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

试试这样的

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

输出

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

Answer 4

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

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

你的代码：

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

Answer 5

在您的第一个示例中，您有

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

这里image01 只是一个键/字符串而不是object 和image01.src 由于其中的. 而出错，键名可以包含_ 和空格（如果引用，ir 'key one')。所以，你可以这样使用它，但我认为你可以删除image01 : new Image()，并且当你使用这个对象时可以创建新图像，like this 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);
}

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

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

example here。另外，作为替代方案，您可以查看 this answer 的示例。