映射时显示对象数组中的图像失败答案

【问题标题】：Displaying images from array of objects fails when mapping映射时显示对象数组中的图像失败
【发布时间】：2022-10-06 12:06:23
【问题描述】：

我正在学习 ReactJS，我正在尝试从一组对象中显示社交列表，如下所示：

const baseUrl = \"./\";
export const SocialData = [
    {
        platform: \"Linkedin\",
        link: \"https://www.linkedin.com/in//\",
        icon: baseUrl + \"linkedin.png\",
    },
    {
        platform: \"Github\",
        link: \"https://github.com/\",
        icon: baseUrl + \"github.png\",
    },
];

然后在我的组件中，我会这样显示：

import { SocialData } from \"../../data/social\";
import \"./socials.css\";

function Socials() {
  const data = SocialData;
  return <div className=\"social-contact\"> 
{/*     <img src={require(\'./linkedin.png\')}/>
 */}  {
      data.map((item) => {
          return (
          <a href={item.link} key={item.platform}>
            <div className=\"social-icon-div\">
              <img src={ require(item.icon) } className=\"social-icon\" />
            </div>
          </a>
          )
      })}
    </div>;
}

评论的图像工作得很好，但是当我试图在我的地图中做同样的事情时，它会说并抛出这个错误：

未捕获的错误：找不到模块 \'./linkedin.png\' 在 webpackEmptyContext (socials|sync:2:1) 在 Socials.js:14:1 在 Array.map () 在社交 (Socials.js:7:1) 在 renderWithHooks (react-dom.development.js:14985:1) 在 mountIndeterminateComponent (react-dom.development.js:17811:1) 在 beginWork (react-dom.development.js:19049:1) 在 HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) 在 Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) 在 invokeGuardedCallback (react-dom.development.js:4056:1)

我尝试将要求直接放入数据中，它也是如此。我也试过

<img src={require( \"\" + props.src )} alt={props.imageAlt} />

正如here 解释的那样，但什么也没做。谢谢你的帮助！

你确定baseUrl 是正确的吗？该路径是相对于组件所在目录的，将其设置为\'./linkedin.png\'意味着您的图像文件与Socials.jsx在同一文件夹中
@Andrew 是的，它在同一个文件夹中，正如我所说，当我在 Socials.js 中简单地执行 <img src={require(\'./linkedin.png\')}/> 时，它可以工作并显示图像，这就是我找不到原因的原因。 . :/

标签： javascript reactjs image

【解决方案1】：

我迟到了，但我刚刚遇到了同样的问题，我想出解决它的唯一方法是保存图像，然后将其作为变量导入，然后使用该变量作为模板文字的值链接属性。

例如：

从“./img/linkedIn.png”导入linkedinImg

从“./img/github.png”导入 githubPng

导出常量 SocialData = [ { 平台：“领英”，链接：“https://www.linkedin.com/in//”，图标：${linkedinImg}， }, { 平台：“Github”，链接：“https://github.com/”，图标：${githubImg}， }, ];

然后在您使用它时它可以工作

这样做的缺点是我将 img 下载到了我的电脑上，但我还是这样做了。希望这可以帮助任何人。

【讨论】：