将图标传递到JS对象中

问题描述

我有一个包含对象数组的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

我遇到的问题是我无法获取图标的路径名来评估和实际渲染图标；相反，我的组件将呈现路径中列出的文本。所有其他属性都很好！有什么想法吗？

解决方法

因为您只是将字符串值呈现到页面：

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

您是要使用<img>元素吗？：

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

,

这在我添加时有效

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

在SKillData.js文件中，并将路径设置为：

icons('./iconName.png'),

谢谢你，大卫！

,

这对我有用。

从本地资产文件夹直接请求，因此您不需要复杂的头文件即可从json文件请求中导入链接

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