Как в React, при итерации в map, указать в src у img ссылку на файл?
Допустим, есть 3 импорта:
import facebook from '../../../assets/svg/facebook.svg';
import github from '../../../assets/svg/github.svg';
import instagram from '../../../assets/svg/instagram.svg';
При запросе с Api возвращается объект: {'facebook': null, 'github': null, 'instagram': null}
Я итерируюсь по нему в компоненте, передавая в компоненту Contacts два значения, например contactTitle = 'facebook', contactValue = null:
И я расчитывал, что у img в src={contactTitle} подставиться импортированый файл, например: при первой итерации contactTitle = 'facebook', значит подтянется импортированный файл facebook, но этого не произошло.
Ответы (1 шт):
В коде src={contactTitle} Вы присваиваете атрибуту src значение переменной contactTitle, которое является простой строкой, например "facebook". Связи между строкой "facebook" и импортированным изображением facebook никакой нет.
Предлагаю реализовать эту связь через дополнительный объект вида:
const images = {
"facebook": facebook,
"github": github,
"instagram": instagram,
}
А атрибуту src присваивать значение свойства этого объекта, найденное по совпадению значения переменной contactTitle и ключа свойства объекта:
<img src={images[contactTitle]} />