React可复用社交链接组件动态导入图片失败，如何修复？

问题情况 #

我在做一个可复用的React组件，目标是接收数据文件里的对象，渲染对应社交平台的带图标外链，只显示数据中提供的平台链接。之前硬编码链接、在组件顶部直接导入图标时组件正常工作，但改成动态传参后，链接能正常渲染并生效，图标却显示不出来，只能看到alt文本。试过require().default和直接写../assets/${item.platform}.png路径都没用。

数据文件（SocialLinks.js） #

export const SocialLinks = [
    {platform: "facebook", link: "https://www.facebook.com/profile.php?id=100087644260703"},
    {platform: "instagram", link: "https://www.instagram.com/sun_shineapp/"},
    {platform: "tiktok", link: "https://www.tiktok.com/@the_sunshineapp?lang=en"},
    {platform: "twitter", link: "https://twitter.com/SunShineApp_"},
    {platform: "youtube", link: "https://www.youtube.com/channel/UCwA1j9ByldoGS3MFvPU6Qhg"},
];

当前组件代码（Socials.jsx） #

import classes from "./Socials.module.css";

import facebook from "../assets/facebook.png";
import instagram from "../assets/instagram.png";
import tiktok from "../assets/tiktok.png";
import twitter from "../assets/twitter.png";
import youtube from "../assets/youtube.png";

function Socials({ socialLinks }) {
  return (
    <div className={classes.socials}>
      {socialLinks.map((item) => (
        <a
          className={classes.link}
          key={item.platform}
          href={item.link}
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            className={classes.img}
            src={require(`../assets/${item.platform}.png`).default}
            alt={`../assets/${item.platform}.png`}
          />
        </a>
      ))}
    </div>
  );
}

解决方法 #

方法1：用图标映射对象（最稳妥） #

既然已经在组件顶部导入了所有图标，直接创建一个映射表把平台名和图标变量对应起来，动态渲染时直接取值即可，完全避开动态require的打包解析问题。

修改后的组件代码：

import classes from "./Socials.module.css";

import facebook from "../assets/facebook.png";
import instagram from "../assets/instagram.png";
import tiktok from "../assets/tiktok.png";
import twitter from "../assets/twitter.png";
import youtube from "../assets/youtube.png";

// 平台名到图标资源的映射
const iconMap = {
  facebook,
  instagram,
  tiktok,
  twitter,
  youtube
};

function Socials({ socialLinks }) {
  return (
    <div className={classes.socials}>
      {socialLinks.map((item) => (
        <a
          className={classes.link}
          key={item.platform}
          href={item.link}
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            className={classes.img}
            src={iconMap[item.platform]}
            alt={`${item.platform} 图标`}
          />
        </a>
      ))}
    </div>
  );
}

方法2：调整动态require的写法 #

如果一定要用动态require，得让打包工具（比如Webpack）能提前识别要打包的资源。路径里的固定部分必须写死，只动态替换文件名，且item.platform的取值必须是已知的固定值（不能是完全随机的字符串）。

修改组件里的img标签：

<img
  className={classes.img}
  src={require(`../assets/${item.platform}.png`)}
  alt={`${item.platform} 图标`}
/>

如果你的打包工具（比如Create React App）把资源导出在default字段里，就用：

src={require(`../assets/${item.platform}.png`).default}

方法3：在数据文件里加入图标路径 #

直接把图标路径加到SocialLinks数组里，组件里动态加载：

修改数据文件：

export const SocialLinks = [
    {platform: "facebook", link: "https://www.facebook.com/profile.php?id=100087644260703", icon: "../assets/facebook.png"},
    {platform: "instagram", link: "https://www.instagram.com/sun_shineapp/", icon: "../assets/instagram.png"},
    {platform: "tiktok", link: "https://www.tiktok.com/@the_sunshineapp?lang=en", icon: "../assets/tiktok.png"},
    {platform: "twitter", link: "https://twitter.com/SunShineApp_", icon: "../assets/twitter.png"},
    {platform: "youtube", link: "https://www.youtube.com/channel/UCwA1j9ByldoGS3MFvPU6Qhg", icon: "../assets/youtube.png"},
];

修改组件代码（无需再在顶部导入图标）：

import classes from "./Socials.module.css";

function Socials({ socialLinks }) {
  return (
    <div className={classes.socials}>
      {socialLinks.map((item) => (
        <a
          className={classes.link}
          key={item.platform}
          href={item.link}
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            className={classes.img}
            src={require(item.icon).default}
            alt={`${item.platform} 图标`}
          />
        </a>
      ))}
    </div>
  );
}

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