git push heroku master:找不到文件

Question

我正在构建一个 React 应用程序并通过以下方式加载图像：

应用程序的状态包含这样的产品

{
title: "Sound",
image: "microphone.jpg",
subtitle: "This is a subtitle",
},

我使用 require 从根目录一直访问图像

let display = this.props.products[this.props.contentIdToDisplay];
<img src={require('/home/username/Documents/Coding/Heroku/crusade-1/src/assets/images/'+display.image)} className="product-image"/>

由于某种原因，Heroku无法编译构建并吐出以下错误消息：

remote: Failed to compile.
remote: 
remote: ./src/components/Carousel.js
remote: Cannot find file '/home/username/Documents/Coding/Heroku/crusade-1/src/assets/images' in './src/components'.

资产/图像存在并包含项目的所有图像，此代码在开发中运行良好。如何让 Heroku 识别和编译图像？

Answer 1

'/home/username/Documents/Coding/Heroku/crusade-1/src/assets/images/' 是对个人计算机上文件系统的引用。

您需要引用相对于项目的文件。

假设你有这样的项目

index.js
|_images // folder containing your images
|_react // folder containing your react components

然后，您的 img 标签可能看起来像这样

let display = this.props.products[this.props.contentIdToDisplay];
<img src={`/images/${display.image}`} className="product-image"/>