如何在React组件中利用Prop关联导入的图片资源并设置img的src

嗨，这个需求很好实现，核心思路是用一个映射对象把mediaType和对应的图标资源关联起来——因为你已经静态导入了SVG，直接通过键值对匹配就行，而且TypeScript还能帮你做类型校验，避免传错值。下面是具体的实现方案：

完整修改后的代码 #

import google from "media/icons/icon-google.svg";
import facebook from "media/icons/icon-facebook.svg";

// 定义合法的媒体类型，限制传入的mediaType只能是指定有效值
type MediaType = 'google' | 'facebook';

// 创建图标映射：键是mediaType，值是对应的导入资源
const iconMap: Record<MediaType, string> = {
  google,
  facebook
};

const SocialButton = (props: { mediaType: MediaType }) => {
  // 从映射中获取对应图标，同时处理意外无效值（类型已限制，属于保险措施）
  const iconSrc = iconMap[props.mediaType] || '';
  // 格式化媒体类型首字母大写，用slice更简洁
  const formattedMediaType = `${props.mediaType.charAt(0).toUpperCase()}${props.mediaType.slice(1)}`;

  return (
    <button className={`continue-with-button ${props.mediaType}`}>
      <span>
        {/* 仅当图标存在时渲染，避免无效img标签 */}
        {iconSrc && <img src={iconSrc} alt={`${formattedMediaType} logo`} />}
      </span>
      <span>Continue with {formattedMediaType}</span>
    </button>
  );
};

export default SocialButton;

关键细节说明 #

1. 类型安全保障：
   用MediaType联合类型限制mediaType的可选值，防止传入"twitter"这类未导入图标的无效值，编辑器也会给出实时提示。

2. 映射对象的作用：
   打包工具（如Webpack、Vite）会在编译时解析静态导入的资源，动态字符串拼接（比如src={icon-${props.mediaType}.svg}）无法被正确识别，而映射对象能让工具提前处理所有图标资源，确保路径正确。

3. 扩展性强：
   以后要加新图标（比如Twitter），只需要三步：

   • 导入对应的SVG资源
   • 在MediaType里添加'twitter'
   • 在iconMap里加一行twitter: twitter

4. 无障碍优化：
   给img标签加上alt属性，符合网页无障碍访问规范。

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