reactjs - 在 Heroku 上托管后端时，无法以编程方式访问 React 应用程序中的图像 url

Question

我有一个简单的聊天和绘图应用程序，使用 React 中的 websockets 和 Ruby on Rails 后端。我将后端 API 部署到 Heroku，从那时起我就无法让聊天头像出现在聊天中。要么它破坏了我的代码，要么只出现了一个损坏的图像链接。

我的消息组件如下所示：

import React from 'react';

const Message = props => {
  let options = { hour: "2-digit", minute: "2-digit", weekday: 'long', month: 'long', day: 'numeric' };
  let sentOn = new Date(props.message.created_at).toLocaleDateString("en-US", options)
  let imgSrc = `../img/${props.message.user.avatar}.png`
  return (
    <div className="message">
      <img className="chat-avi" src={require(imgSrc)} alt={`${props.message.user.avatar}`}/>
      <h5 className="msg-user-name">{props.message.user.name} ({props.message.user.pronouns})</h5>
      <p className="message-content">{props.message.content}</p>
      <p className="sent-on">sent on: {sentOn}</p>
    </div>
  )
}

export default Message;

我也试过：

<img className="chat-avi" src={require(`../img/${props.message.user.avatar}.png`)} alt={`${props.message.user.avatar}`}/>

和

<img className="chat-avi" src={imgSrc} alt={`${props.message.user.avatar}`}/>

当我在 src 属性中使用 require 时，我的应用程序会中断，而当我在 src 属性中不使用 require 时，我会得到一个损坏的图像链接。

在应用程序的其他地方，我成功地看到了使用以下代码渲染的图像：

<img className="avi-img" onClick={this.changeAvatar} src={require("../img/pink_fairy_armadillo.png")} alt="pink_fairy_armadillo"/>

如您所见，主要区别在于，在我的 src 属性未按预期工作的代码中，我需要从道具中获取一些东西并将其作为图像 URL 的一部分传递。当我在开发人员工具中查看成功渲染的图像元素时，我看到如下内容：

<img class="avi-img" src="data:image/png;base64,iVBORw0KGgoAAAANSU+[and etc as a long string]" alt="pink_fairy_armadillo">

损坏的图像元素的 src URL 没有被转换成类似的东西。当我的应用程序中断时，我会收到类似“错误：找不到模块'../img/pink_fairy_armadillo.png'”的消息。

我的应用程序在本地运行时按预期工作，问题仅出现在 Heroku 上。谢谢你的帮助。

标签： reactjsheroku