如何通过Props为React组件传入URL？图片路径加载失败求助

核心原因是require(props.srcUrl)这种动态传参方式无法被webpack正确解析——webpack在打包阶段需要明确的文件路径，动态字符串无法被提前识别和处理。以下是几种可行的解决方法：

方法一：父组件提前导入图片，传递导入对象 #

在使用IconSkill的父组件中先导入目标图片，再将导入后的资源对象传给子组件：

父组件代码

import FigmaIcon from '../../images/skills/figma.svg';

// 使用组件时传递导入后的资源
<IconSkill src={FigmaIcon} alt="Figma Icon" />

子组件修改

const IconSkill = (props) => {
  return (
    <img
      onMouseOver={() => {
        const skillIcon = document.getElementById("skills-icon");
        skillIcon.classList.add("skills-icon-hover");
        setTimeout(() => {
          skillIcon.classList.remove("skills-icon-hover");
        }, 1500);
      }}
      id="skills-icon"
      className="skills-icon"
      src={props.src}
      alt={props.alt}
    />
  )
}

方法二：将图片放到public目录，使用绝对路径 #

把图片移到项目根目录的public/images/skills/文件夹下，直接传递绝对路径字符串：

子组件修改

const IconSkill = (props) => {
  return (
    <img
      onMouseOver={() => {
        const skillIcon = document.getElementById("skills-icon");
        skillIcon.classList.add("skills-icon-hover");
        setTimeout(() => {
          skillIcon.classList.remove("skills-icon-hover");
        }, 1500);
      }}
      id="skills-icon"
      className="skills-icon"
      src={props.srcUrl}
      alt={props.alt}
    />
  )
}

父组件使用

<IconSkill srcUrl="/images/skills/figma.svg" alt="Figma Icon" />

方法三：使用动态require的模板字符串（限定路径前缀） #

如果必须传递相对路径的部分内容，可通过模板字符串指定固定路径前缀，让webpack识别需要打包的目录：

子组件修改

const IconSkill = (props) => {
  return (
    <img
      onMouseOver={() => {
        const skillIcon = document.getElementById("skills-icon");
        skillIcon.classList.add("skills-icon-hover");
        setTimeout(() => {
          skillIcon.classList.remove("skills-icon-hover");
        }, 1500);
      }}
      id="skills-icon"
      className="skills-icon"
      src={require(`../../images/skills/${props.iconName}.svg`).default}
      alt={props.alt}
    />
  )
}

父组件使用

<IconSkill iconName="figma" alt="Figma Icon" />

额外优化：用useRef替代DOM查询（更符合React思维） #

避免直接通过getElementById查询DOM，改用React的useRef钩子：

import { useRef } from 'react';

const IconSkill = (props) => {
  const skillIconRef = useRef(null);

  const handleMouseOver = () => {
    skillIconRef.current?.classList.add("skills-icon-hover");
    setTimeout(() => {
      skillIconRef.current?.classList.remove("skills-icon-hover");
    }, 1500);
  };

  return (
    <img
      onMouseOver={handleMouseOver}
      ref={skillIconRef}
      className="skills-icon"
      src={props.src}
      alt={props.alt}
    />
  )
}

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