How do I access my app/assets/images folder from a react component?

Conturbo · April 20, 2017, 7:42pm

How do I access my app/assets/images folder from a react component? Should I move the image into my public folder maybe? Thanks everyone! =D

justin · April 21, 2017, 7:02am

@Conturbo I’m going to have a much better answer for you in a couple weeks.

For now, take a look at the examples in this directory:

github.com

shakacode/react_on_rails/blob/master/spec/dummy/client/app/components/ImageExample/ImageExample.js

import React from 'react';
import PropTypes from 'prop-types';
import css from './ImageExample.scss';

// Note the global alias for images
import logo from 'images/256egghead.png';
import bowerLogo from './bower.png';
import blueprintIcon from './blueprint_icon.svg';
import legoIcon from 'images/lego_icon.svg';
const TestComponent = (props) => (
  <div>
    <h1 className={css.red}>This is a test of CSS module color red.</h1>
    <hr/>
    <h1 className={css.background}>Here is a label with a background-image from the CSS modules
      imported</h1>
    <img src={logo}/>
    <hr/>
    <h1 className={css.backgroundSameDirectory}>This label has a background image from the same
      directory. Below is an img tag in the same directory</h1>
    <img src={bowerLogo}/>

This file has been truncated. show original