How to get an array of images to combine and show 1 image?

JavaScript
1

Hi,

I have a bunch of split images and have to combine this to show one image. To combine, it will require multiple rows and columns to make the image. What would be the best approach to do this?

2

Hey @deerosez,

I’m assuming you’re going to use HTML and CSS, one solution would be to make a table element and use all the images in the array and append it as a table body into the table one by one. This will create a table with rows and columns but with only the images you given.

Another solution is to append it to a container and use flexbox. Here’s how it will be in HTML & CSS:

<div id=image-container>

</div>

#image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
3

Hi,

I think that display : grid would be perfect here. There’s a bunch of challenges on the subject in the FCC curriculum.

Greets,
Karin

4

Apologies, I didn’t provide much details. I’m trying to achieve for an assignment. Have seen different ways and saw that an array may work through a table.

This is my javascript:
image

5

This is my HTML:
image