React: Fade not working - css

Question

I'm using this code from here: http://buildwithreact.com/article/fade-in-image-recipe
currently have it as my component:
<ImageComponent src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />
Now when I go to google chrome and inspect the element, it has the class names of image and image-loaded but when take a look at the css, there is no css even though I added it to my style sheet. Does anyone know how to fix this?
.image { opacity: 0; transition: opacity 500ms ease-in; }
.imageloaded { opacity: 1; }
Here is the css I imported(code above)
import React, { Component } from 'react';
import ImageComponent from './image.component.jsx';
import styles from './css/Header.css';
export default class Home extends Component {
constructor() {
super();
this.state = {
lightboxIsOpen: false,
currentImage: 0,
}
this.closeLightbox = this.closeLightbox.bind(this);
this.gotoNext = this.gotoNext.bind(this);
this.gotoPrevious = this.gotoPrevious.bind(this);
}
return(
<div>
<Grid>
<div>
<ImageComponent src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />
</div>
</Grid>
</div>
)
}
Here is the component for ImageComponent
import classNames from 'classnames';
import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';
const ImageComponent = React.createClass({
getInitialState: function() {
return {
loaded: false
};
},
onImageLoad: function() {
if (this.isMounted()) {
this.setState({ loaded: true });
}
},
componentDidMount: function() {
var imgTag = ReactDOM.findDOMNode(this.refs.img);
var imgSrc = imgTag.getAttribute('src');
var img = new window.Image();
img.onload = this.onImageLoad;
img.src = imgSrc;
},
render: function() {
var { className, ...props } = this.props;
var imgClasses = 'image';
var rootClassName = classNames(className, 'image', {
'imageloaded': this.state.loaded,
});
return (
<img ref="img" {...props} className={rootClassName} />
);
}
});
export default ImageComponent;

Answer 1

Try passing image url as props to imagecomponent and directly attach it to img element.