Свойство Style .sr c в элементах массива

Question

Итак, у меня есть следующий код, когда при нажатии пробела изображения переключаются. Моя проблема в том, что каждое из моих изображений имеет разное разрешение, и, как объяснил w3schools: "Примечание. Свойство sr c можно изменить в любое время. Однако новое изображение наследует атрибуты высоты и ширины исходное изображение, если не указаны новые свойства высоты и ширины . " Но, как вы можете видеть в коде, мои изображения являются элементами массивов. Кто-нибудь знает, как стилизовать элементы массивов? Спасибо !!

Переключение между изображениями:

setTimeout(function() {
let icon = document.getElementById("icon-p1")
icon.style.display = 'block'
let spaceship1 = "Photo/Spaceship.png"
let spaceship2 = "Photo/Spaceship1.png"
let spaceship3 = "Photo/Spaceship2.png"
let spaceship4 = "Photo/Spaceship3.png"
let hits = 0;
const images = [spaceship1, spaceship2, spaceship3, spaceship4]
document.body.onkeyup = function(e) {
if (e.keyCode === 32) {hits++; icon.src = images[hits % 4]}}}, 4000)}

Исходное изображение

<img src="Photo/Spaceship.png" id="icon-p1" style="display:none">

Answer 1

Вы не будете стилизовать элемент массива, а вместо этого будете использовать фактический элемент HTML.

Вы можете использовать javascript, чтобы определить следующее изображение и таким образом установить высоту и ширину.

Вы также можете использовать 2D-массив для их хранения, примерно так:

const images = [[spaceship1,"1920px","1080px"],[spaceship2,"1366px","768px"]];

А затем установите высоту и ширину с помощью javascript динамически, используя указанную высоту и ширину для этого изображения. .

Установка источника изображения останется прежней, а высоту и ширину задайте следующим образом:

icon.height = images[0][1]
icon.width = images[0][2]

Где первый индекс массива - это изображение, которое вы хотите.