React 应用程序无法识别 require()答案

【问题标题】：React application does not recognize require()React 应用程序无法识别 require()
【发布时间】：2021-04-07 20:29:28
【问题描述】：

我正在构建一个简单的反应投资组合应用程序。我的投资组合项目的信息存储在 JSON 文件中。

当我尝试为投资组合项目使用图像代码时，它不会返回正确的路径。相反，它会返回路径应位于的“[object Module]”。

代码：

import React, { Component } from 'react';

export default class WorkItemFocus extends Component {

...

render() {
    if (this.props.activeItemId === '') {
        return (
            <div className="text-center">
                <p>Please select an item below to view more details.</p>
            </div>
        )
    } else {
        const { name, description, tags, img_code } = this.props.activeItem;
        return (
            ...
            <img 
              src={require(`../assets/img/${img_code}`)}
              alt={name}
            />
            ...
        )
    }
}
}

屏幕截图：

我在网上查了一下，大部分都说我没有使用 webpack。我的 package-lock.json 文件说它安装在 react-scripts 下。

我只是在两个月前为别人做的，没有遇到这个问题。有什么我遗漏的吗？

【问题讨论】：

标签： javascript node.js reactjs webpack

【解决方案1】：

在这篇文章中找到了答案：Webpack file-loader outputs [object Module]

需要在代码中添加 .default。

<img 
    src={require(`../assets/img/${img_code}`).default}
    alt={name}
/>

（我希望我不是唯一一个发布问题的人，发布后直接找到答案，然后一两个小时感觉很愚蠢）

【讨论】：