Question

我在React和Ruby on Rails后端使用websockets开发了一个简单的聊天和绘图应用程序。我将后端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属性未按预期工作的代码中，我需要从props中获取某些内容并将其作为图像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上。感谢您的帮助。

在Heroku上托管后端时，无法以编程方式访问React应用中的图片网址

0 个答案: