Как отобразить вложение Active Storage из Rails в React? - PullRequest
Новая
       14

Как отобразить вложение Active Storage из Rails в React?

0 голосов
/ 26 марта 2019

Я использую комбо React / Rails и использую direct_upload для прикрепления изображений / аватаров к рельсам Active Storage и использую AWS S3 в качестве сервиса.Все загружается сейчас, но файл, возвращающийся к реакции, не отображается.Я также использую Semantic-ui-реакции для рендеринга <Image/>.

Мне пришлось создать отдельный маршрут и метод в моем контроллере Users, чтобы сохранить вложения из-за проблем с информацией о токене (jwt), не передаваемой в бэкэнд через библиотеку с именем <ActiveStorageProvide, но это другоеистория.Итак, вот мой код:

метод прикрепления к интерфейсу в React: 

    <ActiveStorageProvider
        endpoint={{
          protocol: 'http',
          method: 'PUT',
          attribute: 'avatar',
          host: 'localhost',
          port: '9000',
          model: 'User',
          path: `http://localhost:9000/api/v1/users/avatar_upload/${this.props.match.params.id}`,
          model: 'User',
        }}

теперь он работает нормально.

Это срабатывает direct_upload, а затем на мой UsersController:

  def avatar_upload
    @user.update(user_params)
    if @user.save
    render json: @user, status: :accepted
  else
   render json: { errors: @user.errors.full_messages }, status: :unprocessible_entity
  end
end

вот что я получаю с рельсов: 

{id: 39, name: "Demian Sims", username: "dsound", avatar: "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2…d6c8cece030978c0143cadc9c4343ced168f/IMG_2008.png", sightings: Array(1), …}
animals: [{…}]
avatar: "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBWUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1941d6c8cece030978c0143cadc9c4343ced168f/IMG_2008.png"
id: 39
name: "Demian Sims"
sightings: [{…}]
username: "dsound"
__proto__: Object

Затем я пытаюсь сделать здесь: 

  render() {
      console.log(this.state.user.avatar)
    return (
      <><div>
      User profile page<br />
      <p>{this.state.user.name}</p><br />
      <p>{this.state.user.username}</p><br />
      <Image src={this.state.user.avatar}  alt={this.state.user.username}  avatar/><br />

Я ожидаю изображение аватарано просто посмотрите на заполнитель img.Я новичок во всем этом, так что извините заранее.

...