Блог

У меня есть простое приложение для чата и рисования, использующее websockets в React с серверной частью 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}`}/>
  

Когда я использую require внутри атрибута src, мое приложение ломается, а когда я не использую require внутри атрибута src, я получаю неработающую ссылку на изображение.

В другом месте приложения я успешно вижу изображения, отображаемые, например, с помощью этого кода:

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

URL-адрес src для поврежденных элементов изображения не преобразуется в аналогичную вещь. Когда мое приложение ломается, я получаю сообщение типа «Ошибка: не удается найти модуль’../img/pink_fairy_armadillo.png'».

Мое приложение работает должным образом при локальном запуске, проблема возникает только на Heroku. Спасибо за любую помощь.