babel-plugin-transform-react-jsx-img-import

Generate imports for jsx img elements. A handy transform for use in webpack workflows.

Exclude elements from transformation

Prefix a img src with "!" to exclude it from the transformation.

var profile = <div>
  <img src="!avatar.png" className="profile" />
</div>;

Example

In

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

Out

var _avatar = require("avatar.png");
 
var _image = _interopRequireWildcard(_avatar);
 
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
var profile = React.createElement( "div", null,
  React.createElement("img", { src: _image.default, className: "profile" }),
  React.createElement( "h3", null, [user.firstName, user.lastName].join(' ') )
);
 

Installation

Install it via npm:

npm install babel-plugin-transform-react-jsx-img-import

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-react-jsx-img-import"]
}

Via CLI

$ babel --plugins transform-react-jsx-img-import script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-react-jsx-img-import"]
});

License

MIT