javascript - React 应用程序已发布，但目录 (/assets/images/) 中的图像丢失

Question

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

发布站点的结构：

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

资产清单.json：

反应应用程序结构：

标签： javascriptnode.jsreactjsnpmgithub-pages

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';

编辑：

当您发送了您的存储库的 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。