react-rails资产管道图像路径

Question

我正在使用react-rails gem，但我在弄清楚如何从资产管道加载图像时遇到了麻烦。

目前我使用.js.jsx.erb扩展来处理这个问题，但据我所知这是非常规的。(我说的对吗？)

有时我只是使用一个空的div，并将div的background-image属性设置为我想要使用的图像。

在使用react-rails时，将图像加载到react组件的最佳方法是什么

Answer 1

有三种导入镜像的方式...

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