react-rails asset pipeline image path


react-rails asset pipeline image path



I'm using the react-rails gem, and I'm having trouble figuring out how to load images from the asset pipeline.



I handle this currently by using the .js.jsx.erb extension, but as far as I know this is unconventional. (am I correct?)


.js.jsx.erb



Sometimes I just use an empty div and and set the div's background-image property as the image I intend to use.


background-image



What is the best way to go about loading images to react components when using react-rails?


react-rails




1 Answer
1



There are two ways to import image...



1) If you are direct using jsx.erb or js.erb file...


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) Passing as props Through .erb file to .js.erb or .jsx.erb file


.erb


.js.erb


.jsx.erb



in your .erb file


.erb


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



in your .js.erb or .jsx.erb file


.js.erb


.jsx.erb


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



Source: github





I've tried both ways. Currently I'm doing it the first way, but it seems like most people do not use jsx.erb. The second way is problematic because sometimes I have to pass the images several levels.
– justcode
Jun 30 at 16:16


jsx.erb





I do know how to get it to work. I want to know what the "best practice" is.
– justcode
Jun 30 at 16:16






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

How to input without newline? (Python)

How to input without newline? (Python) I am trying to create a simple file editor in Python via the console (called PyCons). Here is my current program: def PyCons(f): file = open(f, "r") appe = open(f, "a") print("n=====nPyCons Editor, v1.2nPython 3.6.1n") global i i = 0 for line in file: i += 1 print(" {}| ".format(i) + line, end='') for k in range(10000000000000): print("n {}| ".format(i+1), end='') inp = input("") if inp == "@PyCons.save()": print("n=====") break else: i += 1 appe.write("n" + inp) I used the end method to make sure that the existing code in the file was printed properly in its line format, but the input function does not have an end attribute. So, when I go to enter code in the editor: end input end PyCons("magic.html") ... ===== PyCons Editor, v1.2 Python 3.6.1 1| <p>Hello!...
Read more

C++ thread error: no type named ‘type’ MINGW

C++ thread error: no type named ‘type’ MINGW I'm currently doing a project for my operational systems class and I have to make a program to find prime numbers to run in threads. So I did this: #include <iostream> #include <cmath> #include <thread> #define THREADNUMBER 100 using namespace std; int CONTADOR = 0; int CONTADORTHREADEXECUTADA = 0; int primeRange(int v1, int v2) { int a, limit; bool isprime; for (int i = v1; i <= v2; i++) { if (i % 2 != 0 && i % 3 != 0) { isprime = true; limit = i / 2; if(i == 1) isprime =false; limit = (int)sqrt(i); //General case for(a=2; a <= limit; a++){ if(i % i == 0 && i != 2){ isprime = false; break; } } if (isprime) { CONTADOR++; } } } CONTADORTHREADEXECUTADA++; return 1; } int main(int argc, char *argv[ ] ) { int number1 = atoi(argv[1]); int num...
Read more

Analog for TagView in flutter

Image
Analog for TagView in flutter I want to have UI like this: With native Android it can be done with libraries like https://github.com/whilu/AndroidTagView, how can it be done with flutter? 2 Answers 2 you can make the same UI by combining the Wrap and Chip widget as @wasyl montioned . but this is a full example about what you need Wrap Chip Notes : spacing deleteIcon avatar Chip Shape new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ new Wrap( children: <Widget>[ Chip( label: new Text("Java"), onDeleted: () {}, labelPadding: EdgeInsets.all(2.0), deleteIcon: Icon(Icons.clear), ), Chip( label: new Text("C++"), onDeleted: () {}, labelPadding: EdgeInse...
Read more