Как в React, при итерации в map, указать в src у img ссылку на файл?

Рейтинг: 0Ответов: 1Опубликовано: 26.01.2023

Допустим, есть 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:

И далее в компоненте Contacts отрисовываю:

И я расчитывал, что у img в src={contactTitle} подставиться импортированый файл, например: при первой итерации contactTitle = 'facebook', значит подтянется импортированный файл facebook, но этого не произошло.

reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

В коде src={contactTitle} Вы присваиваете атрибуту src значение переменной contactTitle, которое является простой строкой, например "facebook". Связи между строкой "facebook" и импортированным изображением facebook никакой нет.

Предлагаю реализовать эту связь через дополнительный объект вида:

const images = {
  "facebook": facebook,
  "github": github,
  "instagram": instagram,
}

А атрибуту src присваивать значение свойства этого объекта, найденное по совпадению значения переменной contactTitle и ключа свойства объекта:

<img src={images[contactTitle]} />