передача значков в объект JS

#javascript #reactjs #icons

#javascript #reactjs #Значки

Вопрос:

У меня есть файл js с массивом объектов, я пытаюсь динамически загружать атрибуты с помощью компонента, и, похоже, я не могу понять, как передать значки компоненту рендеринга.

Вот компонент, который я использую для отображения данных:

 import React, { Component } from 'react';
import SkillData from '../../store/skillData';
import './SkillsCard.css';

class SkillsCard extends Component {
    state = { }

    renderSkills = () => 
    SkillData.map((skill, _id) => 
        <div key={_id} className="skillCard col-sm-3 m-2">
            <div className="top">
                {/* ***line in question*** */}
                <div className="icon">{skill.icon}</div>
                <h5>{skill.title}</h5>
            </div>
            <div className="bottom">
                    {skill.techs.map((tech,index)=>(
                    <div className='skillCardList' key={index}> {tech}</div>
                    ))}
            </div>
        </div>
    );

    render() { 
    
        return ( 
            this.renderSkills()
         );
    }
}
 
export default SkillsCard;

и вот файл, из которого я извлекаю данные:

 const SkillData = [
    {
        _id: '1',
        icon: '../../assets/icons/frontend.png',
        title: 'Front End',
        techs: ['HTML5', 'CSS | SCSS', 'JavaScript', 'React | Redux', 'Angular']
    },
    {
        _id: '2',
        icon: '../../assets/icons/server.png',
        title: 'Back End',
        techs: ['NodeJS', 'Express', 'Postman', 'Authentication | Authorization']
    },
    {
        _id: '3',
        icon: '../../assets/icons/database.png',
        title: 'Databases',
        techs: ['MongoDB', 'mySQL', 'PostgreSQL']
    }
]

export default SkillData

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу получить имя пути к значкам для оценки и фактического отображения значка; Вместо этого мой компонент отображает текст, указанный в пути. Все остальные атрибуты отображаются просто отлично! Есть какие-нибудь мысли?

Ответ №1:

Потому что вы просто отображаете строковое значение на странице:

 <div className="icon">{skill.icon}</div>

Вы имели в виду использовать <img> элемент?:

 <div className="icon">
  <img src={skill.icon} />
</div>

1. @WesHampton: Что вы подразумеваете под «путь не вычисляется»? В вопросе звучало так, как будто путь был успешно отображен в виде текста, и вам просто нужно было, чтобы это было изображение. Не могли бы вы пояснить?

Ответ №2:

Это сработало, когда я добавил

 const icons = require.context('../assets/icons', true);

в SKillData.js файл и задайте пути к:

 icons('./iconName.png'),

Миллион благодарностей, Дэвид!

Ответ №3:

У меня это работает.

Прямой запрос из вашей локальной папки assets, поэтому вам не нужно усложнять импорт заголовка file ссылкой из запроса файла json

 {/* line in question */}
<div className="icon">
  <img src={require(`${skill.icon}`)} />
</div>