Как я могу ссылаться на файлы logo.png с именами в моем приложении React и динамически отображать их для технического ст ⇐ CSS

[Гость]

Я работаю над проектом веб-разработки, в котором у меня есть список проектов, каждый из которых имеет название, описание и набор технологий. Я хочу отображать значки технологий рядом с названиями технологий, используемых в описании каждого проекта. Например, если в проекте используется React, я хочу отображать рядом с ним логотип React.

Для этого у меня есть отдельные файлы изображений для каждого логотипа технологии, например React.png, Nodejs.png и т. д. У меня также есть массив названий технологий в стеке технологий каждого проекта.

Моя задача — найти эффективный и понятный способ связать эти технологические логотипы с соответствующими названиями и динамически отображать их в моем приложении React для описания каждого проекта.

Я хочу избежать жесткого кодирования тегов изображений для каждой технологии и вместо этого найти более масштабируемый и удобный в обслуживании подход. Как я могу добиться этого в своем приложении React?

Когда я ссылаюсь на логотип по его имени импорта «reactLogo», он отображает URL-адрес изображения, а не само изображение. Есть ли способ ссылаться на него по имени и не вставлять его каждый раз?
import nodejsLogo из './images/nodejs.png'; импортировать логотип реакции из './images/reactlogo.png'; функция Проекты() { константные проекты = [ { title: "Приложение погоды", imageSrc: "/weather1.png", описание: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nulla nec metus interdum euismod. Sed id sapien id arcu eleifend egestas.", techStack: [, actLogo, "Tech 3", "Tech 4"], }, // больше проектов ]; возвращаться ( Мой Проекты {projects.map((проект, индекс) => ( ))} ); } экспортировать проекты по умолчанию;`