ImageComponent.js

'use strict';

const _ = require('lodash');
const React = require('react');

module.exports = React.createClass({
  displayName: 'ImageComponent',

  propTypes: {
    src: React.PropTypes.string.isRequired,
    alt: React.PropTypes.string.isRequired,
    retina: React.PropTypes.bool.isRequired
  },

  getInitialState() {
    return {src: `/images/${this.props.src}`};
  },

  componentDidMount() {
    this.props.retina && window.devicePixelRatio > 1 && this.loadRetinaImage();
  },

  loadRetinaImage() {
    let src = this.state.src.replace(/(.+)(?:@2x)*\.(jpg|jpeg|png|gif})$/, '$1@2x.$2');
    new Promise(resolve => _.extend(new Image(), {onload: resolve, src})).then(() => this.setState({src}));
  },

  render() {
    return <img src={this.state.src} {..._.omit(this.props, ['src', 'retina'])} />;
  }
});