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"/>

git push heroku master：找不到文件

1 个答案: