1.为什么我的png没有加载？
2.什么将是一个适当的方式来加载我的软技能和硬技能选项卡分别自定义图标。
1.如何在垂直窗格中划分我的硬技能和软技能并显示我的东西

在我的data.js中

import creative from "./images/Creative.png";
import critical from "./images/critical.png";
import teamwork from "./images/Teamwork.png";

来自Skills.jsx的代码

import React from "react";
import { Element } from "react-scroll";
import { Container, Row, Col, Button, Tab, Nav } from "react-bootstrap";
import { useAppContext } from "../appContext";
import { Title } from "./globalStyledComponents";
import { skillData as hardSkillData, resume, SoftSkillData } from "../data";

export default function Skills() {
  const { theme } = useAppContext();

  // Separate the skill data into soft and hard skills
  const skillData = hardSkillData.filter((skill) => skill.type === "hard");
  const softSkills = SoftSkillData.filter((skill) => skill.type === "soft");

  return (
    <Element name={"Skills"} id="skills">
      <section className="section">
        <Container className="text-center">
          <Title>
            <h2>Skills</h2>
            <div className="underline"></div>
          </Title>
          {/* Use tabs component to create a navigation for soft and hard skills */}
          <Tab.Container defaultActiveKey="soft">
            <Row className="mt-3 align-items-center justify-content-center">
              <Col xs={12} md={6}>
                <Nav variant="pills" className="flex-column flex-md-row">
                  <Nav.Item>
                    <Nav.Link eventKey="soft">Soft Skills</Nav.Link>
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link eventKey="hard">Hard Skills</Nav.Link>
                  </Nav.Item>
                </Nav>
              </Col>
            </Row>
            {/* Use tab content and tab pane components to render the skills sections */}
            <Tab.Content className="mt-3">
              {/* Soft skills section */}
              <Tab.Pane eventKey="soft">
                <Row className="align-items-center">
                  {SoftSkillData.map((skill) => {
                    return (
                      <Col xs={4} key={skill.name} className="my-md-5">
                        <figure>
                          <img src={softSkills.image} alt={softSkills.name} />
                          <figcaption>{skill.name}{skill.image}</figcaption>
                        </figure>
                      </Col>
                    );
                  })}
                </Row>
              </Tab.Pane>
              {/* Hard skills section */}
              <Tab.Pane eventKey="hard">
                <Row className="align-items-center">
                  {skillData.map((skill) => {
                    return (
                      <Col xs={4} key={skillData.name} className="my-md-5">
                        <figure>
                          <img src={skillData.skill} alt={skillData.name} />
                          <figcaption>{skillData.name}</figcaption>
                        </figure>
                      </Col>
                    );
                  })}
                </Row>
              </Tab.Pane>
            </Tab.Content>
          </Tab.Container>

          {resume && (
            <a href={resume}>
              <Button
                size="lg"
                variant={theme === "light" ? "outline-dark" : "outline-light"}
                className="mt-5"
              >
                R&eacute;sum&eacute;
              </Button>
            </a>
          )}
        </Container>
      </section>
    </Element>
  );
}

我尝试重命名变量。尝试ChatGpt调试，但没有结果。