Webpack环境下如何在map遍历对象数组时正确引入图片？

问题描述 #

我有如下结构的对象数组：

export const NGOarray = [
  {
    name: "1% for the Planet ",
    description:
      "A leading global nonprofit, building a movement of businesses and individuals delivering philanthropic support to environmental organizations working on the front lines for our planet.",
    link: "https://onepercentfortheplanet.org/",
    category: ["water", "everything"],
    logo: "1fortheplanet.webp",
  },
  {
    name: "4ocean",
    description:
      "As both a public benefit corporation and Certified B Corp, we’re committed to ending the ocean plastic crisis.",
    link: "https://www.4ocean.com",
    category: ["water", "everything"],
    logo: "4 Ocean.svg",
  }
]

其中logo属性对应文件夹中的图片文件名。我尝试通过map遍历该数组并展示图片，代码如下：

{NGOarray.map((org) => {
        
                <div key={org.name}>
                  {org.logo && (
                    <img
                         src={
                    require(`../assets/organizations/${org.logo}`)
                      .default
                  }
                    />
                  )}
                  <h3 className="text-2xl font-sans mb-4">{org.name}</h3>
                  <p>{org.description}</p>
                </div>
              );
            }

但图片无法正常显示，请问该如何解决这个问题？

解决办法 #

1. 修复JSX返回问题 #

你的map回调函数使用了大括号{}但没有显式返回JSX元素，这是核心问题之一。有两种修复方式：

方式一：添加显式return

{NGOarray.map((org) => {
  return (
    <div key={org.name}>
      {org.logo && (
        <img
          src={require(`../assets/organizations/${org.logo}`).default}
          alt={org.name} // 建议添加alt属性，提升可访问性
        />
      )}
      <h3 className="text-2xl font-sans mb-4">{org.name}</h3>
      <p>{org.description}</p>
    </div>
  );
})}

方式二：使用箭头函数隐式返回

去掉大括号，直接用圆括号包裹JSX：

{NGOarray.map((org) => (
  <div key={org.name}>
    {org.logo && (
      <img
        src={require(`../assets/organizations/${org.logo}`).default}
        alt={org.name}
      />
    )}
    <h3 className="text-2xl font-sans mb-4">{org.name}</h3>
    <p>{org.description}</p>
  </div>
))}

2. 校验文件路径与文件名 #

• 确认../assets/organizations/路径相对于当前组件文件的位置正确
• 检查文件名的大小写和空格是否与实际文件完全一致（部分打包工具对大小写敏感）
• 确保图片文件确实存在于指定文件夹中

3. 根据打包工具调整加载方式 #

如果是Vite项目，require语法不兼容，需要改用new URL方式加载：

<img
  src={new URL(`../assets/organizations/${org.logo}`, import.meta.url).href}
  alt={org.name}
/>

如果是Create React App项目，原有的require+.default写法是正确的，但要确保打包工具支持对应图片格式（CRA默认支持webp、svg）

4. 添加调试与兜底处理 #

可以给img标签添加onError事件，方便排查加载失败的原因，同时设置兜底图片：

<img
  src={require(`../assets/organizations/${org.logo}`).default}
  alt={org.name}
  onError={(e) => {
    console.error(`图片加载失败: ${org.logo}`, e);
    e.target.src = '../assets/default-logo.png'; // 替换为你的兜底图片路径
  }}
/>

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