本文介绍了Reaction应用程序已发布，但目录(/Assets/Images/)中的图像丢失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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/)中的图像丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！