React 应用程序已发布，但缺少目录 (/assets/images/) 中的图像

Question

我的 React.js 应用程序已发布，但我在images目录 ( /assets/images/) 中的图像资产未部署。

已发布站点的结构：

使用以下命令构建应用程序后npm run build：

资产清单.json：

反应应用程序结构：

Answer 1

我刚刚找到您的网站并检查了来源。如果您在开发工具中检查呈现的页面，您的图像将呈现为<img src="[object Module]">.

看来您正在使用create-react-app并且您曾经require导入过您的图像。在最新版本的 CRA 中，require返回 ES 模块而不是字符串，因为在file-loader该esModule选项中默认启用。

因此，请确保以以下方式之一导入图像：

const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';

编辑：

当你发送了你的 repo 的 URL 时，我可以看到你导入了这样的图像：

<div className="greeting-image-div">
  <img
    alt="saad sitting on table"
    src={require('../../assets/images/manOnTable.svg')}
  ></img>
</div>

正如我上面提到的，您要么需要获取d 模块的default属性require：

<div className="greeting-image-div">
  <img
    alt="saad sitting on table"
    src={require('../../assets/images/manOnTable.svg').default}
  ></img>
</div>

...或使用import：

import manOnTable from '../../assets/images/manOnTable.svg'

// ...

<div className="greeting-image-div">
  <img
    alt="saad sitting on table"
    src={manOnTable}
  ></img>
</div>

我个人更喜欢import.