Путь к изображению трубопровода для реактивных рельсов - PullRequest
Новая
       24

Путь к изображению трубопровода для реактивных рельсов

0 голосов
/ 30 июня 2018

Я использую камень реагировать на рельсы , и мне трудно понять, как загрузить изображения из конвейера ресурсов.

В настоящее время я работаю с этим с помощью расширения .js.jsx.erb, но, насколько я знаю, это нетрадиционно. (я прав?)

Иногда я просто использую пустой div и устанавливаю свойство div background-image как изображение, которое я намерен использовать.

Каков наилучший способ загрузки изображений для реагирования компонентов при использовании react-rails?

1 Ответ

0 голосов
/ 30 июня 2018

Есть три способа импортировать изображение ...

1) Если вы используете файл jsx.erb или js.erb напрямую ... 

var image_path = "<%= asset_path(my_image.png) %>"

                        OR

render: function() {
 return (
  <img src={"<%= asset_url('path/to/image.png') %>"} />
 )
}

2) Передача в качестве реквизита через файл .erb в файл .js.erb или .jsx.erb файл

в вашем .erb файле 

render_component('Component', img_src: image_url('the_path'))

в вашем .js.erb или .jsx.erb файле 

render: function() {
 return (
  <img src={this.props.img_src} />
 )
}

3) Рекомендуется: используйте .js и .jsx файл и визуализируйте его, используя файл вида .html.erb

В файле просмотра example.html.erb

<%= react_component("Example", props: {}, prerender: false) %>

В .jsx файле Example.jsx

import React, { Component } from "react";
import Image from "<IMAGE_PATH>/image.png";

export default class Example extends Component {
  constructor(props, _railsContext) {
   super(props);
  }

  render(){
    return(
      <div>
       <img src={Image} alt="example" />
      </div>
    )
  }
}

Вам необходимо зарегистрировать Example компонент. В вашем app > javascript > packs > application.js

import ReactOnRails from "react-on-rails";
import Exmaple from "<COMPONENT_PATH>/Exmaple";

ReactOnRails.register({
 Exmaple
});

Источник: github

...