gvelo / babel-plugin-transform-react-jsx-img-import Goto Github PK
View Code? Open in Web Editor NEWGenerate imports for jsx img elements. A handy transform for use in webpack workflows.
License: MIT License
Generate imports for jsx img elements. A handy transform for use in webpack workflows.
License: MIT License
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?
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?
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`}
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('//')
Transformation should not be applied to data URI's like
src="data:image/gif;base64,R0lGODlhEAAJAPAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAJsIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCADs="
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.
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" />
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.
When a absolute URL is used the transformation should ignore it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.