Отображение массива объектов для отображения изображений

Question

Я пытаюсь отобразить массив объектов для отображения изображений. Вот мой код:

import React from 'react';
import photos from '../photo-store';

class Landing extends React.Component {
  render() {
    const photoDisplay = Object.keys(photos).map((photo, i) => {
      return <img key={i} src={`.${photos[photo][i].src}`} alt='headshot'/>
    })
    console.log('photoDisplay', photoDisplay)
    return (
      <div>
        <p>Photos will go here</p>
        {photoDisplay}
      </div>
    )
  }
}

export default Landing;

Значение sr c является правильным, когда я console.log, но по какой-то причине я просто получаю свою альтернативную информацию рендеринга, и она не проходит через все объекты в массиве. Любые указатели на то, что может происходить здесь, было бы замечательно. Заранее благодарим за помощь!

Вот фрагмент из того, что на "фотографиях":

"photos": [
    {
      id: 1,
      name: "AmberB",
      src: "./images/AmberB.jpg"
    },
    {
      id: 2,
      name: "AmberR",
      src: "./images/AmberR.jpg"
    }
  ]
}

Answer 1

Вы допустили небольшую ошибку в выражении return. Если у вас для src атрибута ${photos[photo].src} вместо photos[photo][i].src, то он должен работать.

const photoDisplay = Object.keys(photos).map((photo, i) => {
   return <img key={i} src={`${photos[photo].src}`} alt='headshot'/>
})

Пожалуйста, также рассмотрите возможность удаления ., но не уверены в этом.

Надеюсь, это поможет!