HTML

Question

我有一系列图像src ["http://src1", "http://src2", "http://src3"]。我想从该数组中获取所有图像并对其进行操作，例如将它们放入div中？

Answer 1

我认为你的数组有点像：

["http://src1","http://src2","http://src3"]

如果我是对的，那么你可以做类似的事情：

var y = x.map((key,value)=>{return ('<div>'+key+'</div>')});

y将是一个包含图像的div标签的数组。

希望，我理解你的问题。

Answer 2

我想从该数组中获取所有图像并对其进行操作将它们放入div中的示例

您可以动态生成img个元素并将其添加到div。

要遍历数组，您可以使用forEach，使用createElement和appendChild在循环内创建img元素，将图像附加到div }

请参阅下面的示例，该应该可以帮助您入门。

＆＃13;

var images = ["https://placehold.it/50x50","https://placehold.it/25x25","https://placehold.it/75x75"];

var target = document.getElementById('target');

images.forEach(function(imgSrc){
  var newImg = document.createElement("img");
  newImg.src = imgSrc;
  target.appendChild(newImg);
})

＆＃13;

<div id="target"></div>

＆＃13;

Answer 3

创建数组：

您必须使用以下语法来创建JavaScript数组：

var array_name = [ item1, item2, ... ];

或使用新的JavaScript关键字：

var array_name = new Array( item1, item2, ... );

所以你的数组必须是这样的：

var image_source = [ 'http://src1', 'http://src2', 'http://src3' ];

访问数组元素：

通过引用索引号来引用数组元素。例如，此语句访问cars中第一个元素的值：

var first_image = image_source[ 0 ];

示例：

var image_source = [ 'http://img1', 'http://img2', 'http://img3' ]; document.getElementById( 'demo' ).innerHTML = image_source[ 1 ];

<div id="demo"></div>

Answer 4

HTML

 <html>
        <head>
        </head>
        <body>
            <h1>Images</h1>
            <div id="content">
            </div>
            <script src="app.js"></script>
        </body>
    </html>

JS

var imageSources = ["http://src1,http://src2,http://src3"]

    imageSources.forEach(element => {
        var img = document.createElement("img");
        img.width = '300';
        img.height = '300';
        img.src = element;
        document.getElementById("content").appendChild(img)
    };

Answer 5

＆＃13;

var imgSrc = ["http://src1,http://src2,http://src3"];

var string = imgSrc[0];
console.log(string);
var array = string.split(",");
console.log(array);


  var inHTML = '';
  
console.log(array[0]);

 $.each(array, function(key, value){

var html = '<img src="'+ value[key]+'" align="center">';
  inHTML += html;  

});

 $('div#item').html(inHTML);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item"></div>

＆＃13;

您可以将数组中动态创建的图像附加到特定div。希望这会有所帮助...

从图像src数组中获取所有图像src并使用Javascript将它们放入div中？

5 个答案:

HTML

JS