使用JavaScript输出图像数组 [英] Output an array of images in JavaScript
问题描述
我是JavaScript新手，并且制作了此代码。此代码的目的是使用JavaScript和HTML在网站中显示图像的ARRAY。他们都需要一次显示。这是目前为止的代码，但它不起作用。
< html>
< head>
< script>
var ArrayOfImages = [];
var Image1 = new Image1（）
image1.src =image1.jpg;
var Image2 = new Image2（）
Image2.src =image2.jpg;
var Image2 = new Image3（）
Image3.src =image3.jpg;
ArrayOfImages.push（Image1）;
ArrayOfImages.push（Image2）;
ArrayOfImages.push（Image3）;
ArrayOfImages.toString（）;
document.write（ArrayOfImages）;
< / script>
< / head>
< body>
< / body>
< / html>
当我运行这段代码时，我得到的只是一个空白的网页。
对于任何想知道的人来说，图像与html文件在同一个文件中。我也是相对较新的JavaScript和HTML，所以请清楚如何解决它。
您必须使用 array.forEach 然后 append body中的每个数组项。像这样
var ArrayOfImages = ['image1.jpg'，'image2.jpg'，'image3.jpg']; //你假设的arrayArrayOfImages.forEach（function（image）{//对于ArrayOfImages中的每个链接l var img = document.createElement（'img'）; //创建一个img元素img.src = image; //设置其src到链接l document.body.appendChild（img）; //将其附加到主体}）;
查看小提琴：小提琴
UPDATE
您还可以设置 height 和 width 作为您的要求。如下所示。
var ArrayOfImages = ['https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg'，'https://upload.wikimedia.org/wikipedia/commons/f /f9/Wiktionary_small.svg'，'https：// u pload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg]; //你假定的arrayArrayOfImages.forEach（function（image）{var img = document.createElement（'img'）; img.src = image; img.height =45; img.width =50; document.body .appendChild（img）;}）;
I'm new to JavaScript and I made this code. The purpose of this code is to use JavaScript and HTML to display an ARRAY of images in a website. They all need to be displayed at once. This is the code so far, however it is not working.
<html>
<head>
<script>
var ArrayOfImages = [];
var Image1 = new Image1()
image1.src = "image1.jpg";
var Image2 = new Image2()
Image2.src = "image2.jpg";
var Image2 = new Image3()
Image3.src = "image3.jpg";
ArrayOfImages.push(Image1);
ArrayOfImages.push(Image2);
ArrayOfImages.push(Image3);
ArrayOfImages.toString();
document.write(ArrayOfImages);
</script>
</head>
<body>
</body>
</html>
When I run this code all I get is an empty webpage.
For anyone wondering, the images are in the same file as the html file. I'm also relatively new to JavaScript and HTML so please be clear in how to fix it.
You have to use array.forEach then append each array item in body.Like this
var ArrayOfImages = ['image1.jpg', 'image2.jpg', 'image3.jpg']; //your assumed array
ArrayOfImages.forEach(function(image) { // for each link l in ArrayOfImages
var img = document.createElement('img'); // create an img element
img.src = image; // set its src to the link l
document.body.appendChild(img); // append it to the body
});
See Fiddle: Fiddle
UPDATE
You can also set height and width as your requirement.Like below.
var ArrayOfImages = ['https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg']; //your assumed array
ArrayOfImages.forEach(function(image) {
var img = document.createElement('img');
img.src = image;
img.height = "45";
img.width = "50";
document.body.appendChild(img);
});
这篇关于使用JavaScript输出图像数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
