React项目PNG图片加载失败及技能展示布局问题求助

我在React项目中遇到以下技术问题：

• 为何我的PNG图片无法加载？
• 如何在Soft skills和Hard skills标签页中分别加载自定义图标？
• 如何将硬技能与软技能分为垂直面板进行展示？

我的代码 #

data.js #

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

// 补充：需确保技能数据数组的每个对象包含image字段，示例结构
export const SoftSkillData = [
  { name: "Creative", type: "soft", image: creative },
  { name: "Critical Thinking", type: "soft", image: critical },
  { name: "Teamwork", type: "soft", image: teamwork }
];

export const skillData = [
  // 硬技能示例，需根据实际情况添加image字段及对应图标导入
  { name: "React", type: "hard", image: /* 硬技能图标变量 */ },
  { name: "JavaScript", type: "hard", image: /* 硬技能图标变量 */ }
];

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();

  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>
          <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>
            <Tab.Content className="mt-3">
              <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>
              <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>
  );
}

问题解决方案 #

1. PNG图片无法加载的修复 #

核心问题是变量引用错误：

• 软技能循环中误用了数组softSkills的属性，应使用循环参数skill的属性
• 硬技能循环中误用了数组skillData的属性，同样应使用循环参数skill的属性
• 额外检查：确认图片路径正确（如./images/Creative.png是否存在于data.js同级的images文件夹），create-react-app等脚手架默认支持图片资源导入，无需额外配置webpack

修复后的软技能代码片段：

<Tab.Pane eventKey="soft">
  <Row className="align-items-center">
    {softSkills.map((skill) => {
      return (
        <Col xs={4} key={skill.name} className="my-md-5">
          <figure>
            <img src={skill.image} alt={skill.name} />
            <figcaption>{skill.name}</figcaption>
          </figure>
        </Col>
      );
    })}
  </Row>
</Tab.Pane>

修复后的硬技能代码片段：

<Tab.Pane eventKey="hard">
  <Row className="align-items-center">
    {skillData.map((skill) => {
      return (
        <Col xs={4} key={skill.name} className="my-md-5">
          <figure>
            <img src={skill.image} alt={skill.name} />
            <figcaption>{skill.name}</figcaption>
          </figure>
        </Col>
      );
    })}
  </Row>
</Tab.Pane>

2. 标签页加载自定义图标 #

1. 在data.js中导入所有需要的硬/软技能图标
2. 确保SoftSkillData和hardSkillData的每个对象都包含image字段，值为对应导入的图标变量
3. 在Skills.jsx的循环中通过skill.image引用图标即可

示例硬技能data配置：

// data.js中导入硬技能图标
import reactIcon from "./images/react.png";
import jsIcon from "./images/js.png";

export const skillData = [
  { name: "React", type: "hard", image: reactIcon },
  { name: "JavaScript", type: "hard", image: jsIcon }
];

3. 垂直面板展示硬/软技能 #

若无需Tab切换，可直接用Bootstrap的Row和Col实现双面板布局，移动端上下排列、PC端左右排列：

修改后的核心布局代码：

<Container className="text-center">
  <Title>
    <h2>Skills</h2>
    <div className="underline"></div>
  </Title>
  <Row className="mt-3">
    {/* 软技能垂直面板 */}
    <Col xs={12} md={6} className="border p-4">
      <h3>Soft Skills</h3>
      <Row className="align-items-center mt-3">
        {softSkills.map((skill) => {
          return (
            <Col xs={4} key={skill.name} className="my-md-3">
              <figure>
                <img src={skill.image} alt={skill.name} />
                <figcaption>{skill.name}</figcaption>
              </figure>
            </Col>
          );
        })}
      </Row>
    </Col>
    {/* 硬技能垂直面板 */}
    <Col xs={12} md={6} className="border p-4">
      <h3>Hard Skills</h3>
      <Row className="align-items-center mt-3">
        {skillData.map((skill) => {
          return (
            <Col xs={4} key={skill.name} className="my-md-3">
              <figure>
                <img src={skill.image} alt={skill.name} />
                <figcaption>{skill.name}</figcaption>
              </figure>
            </Col>
          );
        })}
      </Row>
    </Col>
  </Row>

  {/* 简历按钮保留 */}
  {resume && (
    <a href={resume}>
      <Button
        size="lg"
        variant={theme === "light" ? "outline-dark" : "outline-light"}
        className="mt-5"
      >
        R&eacute;sum&eacute;
      </Button>
    </a>
  )}
</Container>

内容的提问来源于stack exchange，提问作者mabbas