Support base64, closes #5

Author: zackify

lib/image.js

@@ -23,35 +23,35 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var Image = function (_React$Component) {
   _inherits(Image, _React$Component);
 
-  function Image() {
+  function Image(_ref) {
+    var src = _ref.src;
+
     _classCallCheck(this, Image);
 
     var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Image).call(this));
 
-    _this.state = {
-      opacity: 0
-    };
-    _this.fadeIn = _this.fadeIn.bind(_this);
+    var opacity = 0;
+    if (!src.match(/http/)) opacity = 1;
+
+    _this.state = { opacity: opacity };
     return _this;
   }
 
   _createClass(Image, [{
-    key: 'fadeIn',
-    value: function fadeIn() {
-      this.setState({ opacity: 1 });
-    }
-  }, {
     key: 'render',
     value: function render() {
-      //this vs including an Object.assign polyfill
+      var _this2 = this;
+
       var style = this.props.style || {};
       style.transition = 'opacity ' + (this.props.speed || 1) + 's';
       style.opacity = this.state.opacity;
 
       return _react2.default.createElement('img', _extends({}, this.props, {
         style: style,
         src: this.props.src,
-        onLoad: this.fadeIn
+        onLoad: function onLoad() {
+          return _this2.setState({ opacity: 1 });
+        }
       }));
     }
   }]);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "legit-image",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "an img tag, with built in lazy loading",
   "main": "lib/image.js",
   "scripts": {

src/image.js

@@ -1,21 +1,16 @@
 import React from 'react'
 
-export default class Image extends React.Component{
+export default class Image extends React.Component {
 
-  constructor(){
+  constructor({ src }){
     super()
-    this.state = {
-      opacity: 0
-    }
-    this.fadeIn = this.fadeIn.bind(this)
-  }
+    let opacity = 0
+    if(!src.match(/http/)) opacity = 1
 
-  fadeIn() {
-    this.setState({opacity: 1})
+    this.state = { opacity }
   }
 
   render(){
-    //this vs including an Object.assign polyfill
     let style = this.props.style || {}
     style.transition = `opacity ${this.props.speed || 1}s`
     style.opacity = this.state.opacity
@@ -25,8 +20,10 @@ export default class Image extends React.Component{
         {...this.props}
         style={style}
         src={this.props.src}
-        onLoad={this.fadeIn}
+        onLoad={() => this.setState({opacity: 1})}
       />
     )
   }
 }
+
+

tests/image.js

@@ -5,13 +5,18 @@ import Image from '../src/image'
 
 describe('Image', () => {
   it('renders with opacity: 0', () => {
-    const wrapper = shallow(<Image src="blah" />)
+    const wrapper = shallow(<Image src="http://google.com" />)
     expect(wrapper.props().style.opacity).to.equal(0)
   })
 
   it('changes opacity on state change', () => {
-    const wrapper = shallow(<Image src="blah" />)
+    const wrapper = shallow(<Image src="http://google.com" />)
     wrapper.setState({ opacity: 1 })
     expect(wrapper.props().style.opacity).to.equal(1)
   })
+
+  it('opacity: 1 if base64', () => {
+    const wrapper = shallow(<Image src="data:image/" />)
+    expect(wrapper.props().style.opacity).to.equal(1)
+  })
 })