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

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

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

babel-plugin-transform-react-jsx-img-import's Issues

Failed when turning off modules of ES2015 preset

Thanks for the great plugin.

It does work with this config,

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-runtime",
    "transform-react-jsx-img-import"
  ]
}

but attribute of src is missing when turning off modules of ES2015 preset.

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-runtime",
    "transform-react-jsx-img-import"
  ]
}

Below are versions of related packages:

"dependencies": {
  "react": "^15.3.2",
  "react-dom": "^15.3.2"
},
"devDependencies": {
  "babel-core": "^6.22.1",
  "babel-loader": "^6.2.10",
  "babel-plugin-transform-react-jsx-img-import": "^0.1.4",
  "babel-preset-es2015": "^6.18.0",
  "webpack": "^2.2.1",
  "webpack-dev-server": "^2.3.0"
}

How to solve this problem? Thanks.

Data URIs should not be processed.

Transformation should not be applied to data URI's like

src="data:image/gif;base64,R0lGODlhEAAJAPAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAJsIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCADs="

Use with `srcSet`

Hey, thanks for creating this, it's awesome!

One problem I had though when using it with React, is that it didn't seem to honour srcSet

e.g being able to do:
<img srcSet="[email protected] 2x" src="my-image.png" alt="My alt text" />. It throws a 404 error saying it can't find the image. Even though it works fine if I put it in the src.

I tried just srcset, but no joy there either.

Am I missing something?

allow to override default transform behaviour

Allow to override transformation through a prefix like "!".

for example,
<img src="!/cdn/avatar.png" className="profile" />

should be transformed to
<img src="/cdn/avatar.png" className="profile" />

Protocol relative urls are not handled correctly

urls starting with // are equal to http:// or https://, etc and use the current document's protocol instead of specifying one. You can add support for this easily by changing your source code here:

https://github.com/gvelo/babel-plugin-transform-react-jsx-img-import/blob/master/src/index.js#L38

You just need to add the following that that's all:

|| lowerURL.startsWith('//')

Dynamic names

When variables are added via webpack DefinePlugin plugin, then they are available at compile time. It would be great if this case was also handled.

src={`${ASSET_PREFIX}/svg/fpo/startup-0.svg`}

Include Support for Dynamic Generated Filepaths in JSX

Thanks for the great plugin. One potential improvement would be to add support for dynamic data in JSX. Specifically the following code that is not caught by this plugin:

render() {
        const {details} = this.props;
        return (
            <Col xs={3}>
                <div styleName={this.isActive(details.attributes)}>
                    <img styleName="blockShoe" src={`../../${details.image}`} />
                </div>
            </Col>
        );
    }

Thanks again and let me know if there is anything that I can do to help or if this is just a bug within my code.

Absolute url should not be processed

When a absolute URL is used the transformation should ignore it.

Does not work with 'babel-plugin-transform-react-inline-elements'

Plugin babel-plugin-transform-react-inline-elements https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements is enabled in development mode by babel-react-optimize preset

Without babel-plugin-transform-react-inline-elements it works.

I wonder why?