babel-plugin-transform-react-jsx-img-import
Version:
Generate imports for jsx img elements. A handy transform for use in webpack workflows.
91 lines (60 loc) • 2.34 kB
Markdown
Generate imports for jsx img elements. A handy transform for use in webpack workflows.
Prefix a img src with "!" to exclude it from the transformation.
```javascript
var profile = <div>
<img src="!avatar.png" className="profile" />
</div>;
```
```javascript
var profile = <div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;
```
```javascript
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(' ') )
);
```
Install it via npm:
```shell
npm install babel-plugin-transform-react-jsx-img-import
```
.babelrc
```javascript
{
"plugins": ["transform-react-jsx-img-import"]
}
```
```shell
$ babel --plugins transform-react-jsx-img-import script.js
```
```javascript
require("babel-core").transform("code", {
plugins: ["transform-react-jsx-img-import"]
});
```
MIT