Reaction应用程序已发布，但目录(/Assets/Images/)中的图像丢失 [英] React app is published but images from the directory (/assets/images/) are missing

问题描述

My React.js应用已发布，但images目录(/assets/images/)中的My Images资产未部署。

已发布站点的结构：

使用npm run build构建应用程序后：

ASSET-MANIFENT.json：

反应应用结构：

推荐答案

我刚刚找到您的站点并检查了来源。如果您在开发工具中检查呈现的页面，您的图像将呈现为<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，我可以看到您import images like this：

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

如上所述，您需要获取required模块的default属性：

<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。

这篇关于Reaction应用程序已发布，但目录(/Assets/Images/)中的图像丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！